mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11: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
|
|
@ -97,7 +97,7 @@
|
|||
if (target != null) {
|
||||
if (Array.isArray(target)) {
|
||||
target.forEach((node) =>
|
||||
node?.removeEventListener("contextmenu", openMenu)
|
||||
node?.removeEventListener("contextmenu", openMenu),
|
||||
);
|
||||
} else {
|
||||
target.removeEventListener("contextmenu", openMenu);
|
||||
|
|
@ -139,58 +139,58 @@
|
|||
</script>
|
||||
|
||||
<svelte:window
|
||||
on:contextmenu="{(e) => {
|
||||
on:contextmenu={(e) => {
|
||||
if (target != null) return;
|
||||
if (level > 1) return;
|
||||
if (!ref) return;
|
||||
openMenu(e);
|
||||
}}"
|
||||
on:click="{(e) => {
|
||||
}}
|
||||
on:click={(e) => {
|
||||
if (!open) return;
|
||||
close();
|
||||
}}"
|
||||
on:keydown="{(e) => {
|
||||
if (open && e.key === 'Escape') close();
|
||||
}}"
|
||||
}}
|
||||
on:keydown={(e) => {
|
||||
if (open && e.key === "Escape") close();
|
||||
}}
|
||||
/>
|
||||
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||
<ul
|
||||
bind:this="{ref}"
|
||||
bind:this={ref}
|
||||
role="menu"
|
||||
tabindex="-1"
|
||||
data-direction="{direction}"
|
||||
data-level="{level}"
|
||||
class:bx--menu="{true}"
|
||||
class:bx--menu--open="{open}"
|
||||
class:bx--menu--invisible="{open && x === 0 && y === 0}"
|
||||
class:bx--menu--root="{level === 1}"
|
||||
data-direction={direction}
|
||||
data-level={level}
|
||||
class:bx--menu={true}
|
||||
class:bx--menu--open={open}
|
||||
class:bx--menu--invisible={open && x === 0 && y === 0}
|
||||
class:bx--menu--root={level === 1}
|
||||
style:left="{x}px"
|
||||
style:top="{y}px"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:click="{({ target }) => {
|
||||
const closestOption = target.closest('[tabindex]');
|
||||
on:click={({ target }) => {
|
||||
const closestOption = target.closest("[tabindex]");
|
||||
|
||||
if (closestOption && closestOption.getAttribute('role') !== 'menuitem') {
|
||||
if (closestOption && closestOption.getAttribute("role") !== "menuitem") {
|
||||
close();
|
||||
}
|
||||
}}"
|
||||
}}
|
||||
on:keydown
|
||||
on:keydown="{(e) => {
|
||||
on:keydown={(e) => {
|
||||
if (open) e.preventDefault();
|
||||
if ($hasPopup) return;
|
||||
|
||||
if (e.key === 'ArrowDown') {
|
||||
if (e.key === "ArrowDown") {
|
||||
if (focusIndex < options.length - 1) focusIndex++;
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
} else if (e.key === "ArrowUp") {
|
||||
if (focusIndex === -1) {
|
||||
focusIndex = options.length - 1;
|
||||
} else {
|
||||
if (focusIndex > 0) focusIndex--;
|
||||
}
|
||||
}
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<slot />
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<li role="separator" class:bx--menu-divider="{true}"></li>
|
||||
<li role="separator" class:bx--menu-divider={true}></li>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</script>
|
||||
|
||||
<li role="none">
|
||||
<ul role="group" aria-label="{labelText}">
|
||||
<ul role="group" aria-label={labelText}>
|
||||
<slot />
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -167,46 +167,46 @@
|
|||
</script>
|
||||
|
||||
<li
|
||||
bind:this="{ref}"
|
||||
role="{role}"
|
||||
bind:this={ref}
|
||||
{role}
|
||||
tabindex="-1"
|
||||
aria-disabled="{!subOptions && disabled}"
|
||||
aria-haspopup="{subOptions ? true : undefined}"
|
||||
aria-expanded="{subOptions ? submenuOpen : undefined}"
|
||||
class:bx--menu-option="{true}"
|
||||
class:bx--menu-option--disabled="{true}"
|
||||
class:bx--menu-option--active="{subOptions && submenuOpen}"
|
||||
class:bx--menu-option--danger="{!subOptions && kind === 'danger'}"
|
||||
indented="{indented}"
|
||||
aria-checked="{isSelectable || isRadio ? selected : undefined}"
|
||||
data-nested="{ref &&
|
||||
ref.closest('.bx--menu').getAttribute('data-level') === '2'}"
|
||||
data-sub="{subOptions}"
|
||||
data-id="{id}"
|
||||
aria-disabled={!subOptions && disabled}
|
||||
aria-haspopup={subOptions ? true : undefined}
|
||||
aria-expanded={subOptions ? submenuOpen : undefined}
|
||||
class:bx--menu-option={true}
|
||||
class:bx--menu-option--disabled={true}
|
||||
class:bx--menu-option--active={subOptions && submenuOpen}
|
||||
class:bx--menu-option--danger={!subOptions && kind === "danger"}
|
||||
{indented}
|
||||
aria-checked={isSelectable || isRadio ? selected : undefined}
|
||||
data-nested={ref &&
|
||||
ref.closest(".bx--menu").getAttribute("data-level") === "2"}
|
||||
data-sub={subOptions}
|
||||
data-id={id}
|
||||
{...$$restProps}
|
||||
on:keydown
|
||||
on:keydown="{async ({ key, target }) => {
|
||||
on:keydown={async ({ key, target }) => {
|
||||
if (
|
||||
subOptions &&
|
||||
(key === 'ArrowRight' || key === ' ' || key === 'Enter')
|
||||
(key === "ArrowRight" || key === " " || key === "Enter")
|
||||
) {
|
||||
submenuOpen = true;
|
||||
await tick();
|
||||
options = [...ref.querySelectorAll('li[tabindex]')];
|
||||
options = [...ref.querySelectorAll("li[tabindex]")];
|
||||
if (options[focusIndex]) options[focusIndex].focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (submenuOpen) {
|
||||
if (key === 'ArrowLeft') {
|
||||
if (key === "ArrowLeft") {
|
||||
submenuOpen = false;
|
||||
focusIndex = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
if (key === 'ArrowDown') {
|
||||
if (key === "ArrowDown") {
|
||||
if (focusIndex < options.length - 1) focusIndex++;
|
||||
} else if (key === 'ArrowUp') {
|
||||
} else if (key === "ArrowUp") {
|
||||
if (focusIndex === -1) {
|
||||
focusIndex = options.length - 1;
|
||||
} else {
|
||||
|
|
@ -217,68 +217,68 @@
|
|||
if (options[focusIndex]) options[focusIndex].focus();
|
||||
}
|
||||
|
||||
if (key === ' ' || key === 'Enter') {
|
||||
handleClick({ fromKeyboard: true, id: target.getAttribute('data-id') });
|
||||
if (key === " " || key === "Enter") {
|
||||
handleClick({ fromKeyboard: true, id: target.getAttribute("data-id") });
|
||||
}
|
||||
}}"
|
||||
}}
|
||||
on:mouseenter
|
||||
on:mouseenter="{() => {
|
||||
on:mouseenter={() => {
|
||||
if (subOptions) {
|
||||
timeoutHover = setTimeout(() => {
|
||||
submenuOpen = true;
|
||||
}, moderate01);
|
||||
}
|
||||
}}"
|
||||
}}
|
||||
on:mouseleave
|
||||
on:mouseleave="{(e) => {
|
||||
on:mouseleave={(e) => {
|
||||
if (subOptions) {
|
||||
if (typeof timeoutHover === 'number') clearTimeout(timeoutHover);
|
||||
if (typeof timeoutHover === "number") clearTimeout(timeoutHover);
|
||||
submenuOpen = false;
|
||||
}
|
||||
}}"
|
||||
on:click="{handleClick}"
|
||||
}}
|
||||
on:click={handleClick}
|
||||
>
|
||||
{#if subOptions}
|
||||
<div
|
||||
class:bx--menu-option__content="{true}"
|
||||
class:bx--menu-option__content--disabled="{disabled}"
|
||||
class:bx--menu-option__content={true}
|
||||
class:bx--menu-option__content--disabled={disabled}
|
||||
>
|
||||
{#if indented}
|
||||
<div class:bx--menu-option__icon="{true}">
|
||||
<div class:bx--menu-option__icon={true}>
|
||||
<slot name="icon">
|
||||
<svelte:component this="{icon}" />
|
||||
<svelte:component this={icon} />
|
||||
</slot>
|
||||
</div>
|
||||
{/if}
|
||||
<span class:bx--menu-option__label="{true}" title="{labelText}">
|
||||
<span class:bx--menu-option__label={true} title={labelText}>
|
||||
<slot name="labelText">{labelText}</slot>
|
||||
</span>
|
||||
<div class:bx--menu-option__info="{true}"><CaretRight /></div>
|
||||
<div class:bx--menu-option__info={true}><CaretRight /></div>
|
||||
</div>
|
||||
|
||||
<ContextMenu
|
||||
open="{submenuOpen}"
|
||||
x="{submenuPosition[0]}"
|
||||
y="{submenuPosition[1]}"
|
||||
open={submenuOpen}
|
||||
x={submenuPosition[0]}
|
||||
y={submenuPosition[1]}
|
||||
>
|
||||
<slot />
|
||||
</ContextMenu>
|
||||
{:else}
|
||||
<div
|
||||
class:bx--menu-option__content="{true}"
|
||||
class:bx--menu-option__content--disabled="{disabled}"
|
||||
class:bx--menu-option__content={true}
|
||||
class:bx--menu-option__content--disabled={disabled}
|
||||
>
|
||||
{#if indented}
|
||||
<div class:bx--menu-option__icon="{true}">
|
||||
<div class:bx--menu-option__icon={true}>
|
||||
<slot name="icon">
|
||||
<svelte:component this="{icon}" />
|
||||
<svelte:component this={icon} />
|
||||
</slot>
|
||||
</div>
|
||||
{/if}
|
||||
<span class:bx--menu-option__label="{true}" title="{labelText}">
|
||||
<span class:bx--menu-option__label={true} title={labelText}>
|
||||
<slot name="labelText">{labelText}</slot>
|
||||
</span>
|
||||
<div class:bx--menu-option__info="{true}">
|
||||
<div class:bx--menu-option__info={true}>
|
||||
<slot name="shortcutText">{shortcutText}</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
</script>
|
||||
|
||||
<li role="none">
|
||||
<ul role="group" aria-label="{labelText}">
|
||||
<ul role="group" aria-label={labelText}>
|
||||
<slot />
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue