mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
chore(deps-dev): upgrade prettier-plugin-svelte (#498)
This commit is contained in:
Eric Liu
GitHub
parent
3e7511e3f8
commit
3d002f3246
72 changed files with 944 additions and 733 deletions
|
|
@ -40,22 +40,6 @@
|
|||
let refPanel = null;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.action-text {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.action-text > span {
|
||||
margin-left: 0.75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window
|
||||
on:click="{({ target }) => {
|
||||
if (isOpen && !ref.contains(target) && !refPanel.contains(target)) {
|
||||
|
|
@ -89,9 +73,28 @@
|
|||
bind:this="{refPanel}"
|
||||
class:bx--header-panel="{true}"
|
||||
class:bx--header-panel--expanded="{true}"
|
||||
transition:slide="{{ ...transition, duration: transition === false ? 0 : transition.duration }}"
|
||||
transition:slide="{{
|
||||
...transition,
|
||||
duration: transition === false ? 0 : transition.duration,
|
||||
}}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.action-text {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.action-text > span {
|
||||
margin-left: 0.75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -20,16 +20,6 @@
|
|||
import Icon from "../../Icon/Icon.svelte";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.action-link {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<a
|
||||
bind:this="{ref}"
|
||||
class:bx--header__action="{true}"
|
||||
|
|
@ -41,3 +31,13 @@
|
|||
>
|
||||
<Icon render="{icon}" />
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.action-link {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -54,6 +54,87 @@
|
|||
$: showResults = $searchStore ? true : false;
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
on:mouseup="{({ target }) => {
|
||||
if (target && elTypeSearch) {
|
||||
if (!elTypeSearch.contains(target)) {
|
||||
searchIsActive = false;
|
||||
isSearchFocus = false;
|
||||
}
|
||||
}
|
||||
}}"
|
||||
/>
|
||||
|
||||
<div
|
||||
bind:this="{elTypeSearch}"
|
||||
role="search"
|
||||
class="search-wrapper"
|
||||
class:search-wrapper-hidden="{!searchIsActive}"
|
||||
class:search-focus="{isSearchFocus || searchIsActive}"
|
||||
>
|
||||
<div
|
||||
id="right-panel-action-search"
|
||||
class="search-wrapper-2"
|
||||
role="combobox"
|
||||
aria-expanded="{searchIsActive}"
|
||||
>
|
||||
<button
|
||||
tabindex="{searchTabIndex}"
|
||||
aria-label="Search"
|
||||
class:bx--header__action="{true}"
|
||||
class:btn-search="{true}"
|
||||
class:btn-search-disabled="{searchIsActive}"
|
||||
on:click="{() => {
|
||||
isSearchFocus = true;
|
||||
searchIsActive = true;
|
||||
dispatch('focusInputSearch');
|
||||
}}"
|
||||
type="button"
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}"
|
||||
>
|
||||
<Icon title="Search" tabindex="0" render="{Search20}" />
|
||||
</button>
|
||||
<input
|
||||
bind:this="{elInput}"
|
||||
id="input-search-field"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
tabindex="{closeTabIndex}"
|
||||
class="input-search"
|
||||
class:input-hidden="{!searchIsActive}"
|
||||
placeholder="Search"
|
||||
on:focus="{() => dispatch('focusInputSearch')}"
|
||||
on:focusout="{() => dispatch('focusOutInputSearch')}"
|
||||
on:input="{dispatchInputs}"
|
||||
/>
|
||||
<button
|
||||
id="right-panel-close-search"
|
||||
tabindex="{closeTabIndex}"
|
||||
class:bx--header__action="{true}"
|
||||
class:btn-clear="{true}"
|
||||
class:btn-clear-hidden="{!searchIsActive}"
|
||||
type="button"
|
||||
aria-label="Clear search"
|
||||
on:click="{() => {
|
||||
isSearchFocus = false;
|
||||
searchIsActive = false;
|
||||
searchStore.clear();
|
||||
}}"
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}"
|
||||
>
|
||||
<Icon title="Close" tabindex="0" render="{Close20}" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
|
|
@ -140,84 +221,3 @@
|
|||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window
|
||||
on:mouseup="{({ target }) => {
|
||||
if (target && elTypeSearch) {
|
||||
if (!elTypeSearch.contains(target)) {
|
||||
searchIsActive = false;
|
||||
isSearchFocus = false;
|
||||
}
|
||||
}
|
||||
}}"
|
||||
/>
|
||||
|
||||
<div
|
||||
bind:this="{elTypeSearch}"
|
||||
role="search"
|
||||
class="search-wrapper"
|
||||
class:search-wrapper-hidden="{!searchIsActive}"
|
||||
class:search-focus="{isSearchFocus || searchIsActive}"
|
||||
>
|
||||
<div
|
||||
id="right-panel-action-search"
|
||||
class="search-wrapper-2"
|
||||
role="combobox"
|
||||
aria-expanded="{searchIsActive}"
|
||||
>
|
||||
<button
|
||||
tabindex="{searchTabIndex}"
|
||||
aria-label="Search"
|
||||
class:bx--header__action="{true}"
|
||||
class:btn-search="{true}"
|
||||
class:btn-search-disabled="{searchIsActive}"
|
||||
on:click="{() => {
|
||||
isSearchFocus = true;
|
||||
searchIsActive = true;
|
||||
dispatch('focusInputSearch');
|
||||
}}"
|
||||
type="button"
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}"
|
||||
>
|
||||
<Icon title="Search" tabindex="0" render="{Search20}" />
|
||||
</button>
|
||||
<input
|
||||
bind:this="{elInput}"
|
||||
id="input-search-field"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
tabindex="{closeTabIndex}"
|
||||
class="input-search"
|
||||
class:input-hidden="{!searchIsActive}"
|
||||
placeholder="Search"
|
||||
on:focus="{() => dispatch('focusInputSearch')}"
|
||||
on:focusout="{() => dispatch('focusOutInputSearch')}"
|
||||
on:input="{dispatchInputs}"
|
||||
/>
|
||||
<button
|
||||
id="right-panel-close-search"
|
||||
tabindex="{closeTabIndex}"
|
||||
class:bx--header__action="{true}"
|
||||
class:btn-clear="{true}"
|
||||
class:btn-clear-hidden="{!searchIsActive}"
|
||||
type="button"
|
||||
aria-label="Clear search"
|
||||
on:click="{() => {
|
||||
isSearchFocus = false;
|
||||
searchIsActive = false;
|
||||
searchStore.clear();
|
||||
}}"
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}"
|
||||
>
|
||||
<Icon title="Close" tabindex="0" render="{Close20}" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
<li class="subject-divider">
|
||||
<span>
|
||||
<slot />
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<style>
|
||||
.subject-divider {
|
||||
color: #525252;
|
||||
|
|
@ -14,9 +20,3 @@
|
|||
color: #c6c6c6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<li class="subject-divider">
|
||||
<span>
|
||||
<slot />
|
||||
</span>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -53,6 +53,109 @@
|
|||
: undefined;
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
on:mouseup="{({ target }) => {
|
||||
if (active && !refSearch.contains(target)) active = false;
|
||||
}}"
|
||||
/>
|
||||
|
||||
<div bind:this="{refSearch}" role="search" class:active>
|
||||
<label for="search-input" id="search-label">Search</label>
|
||||
<div role="combobox" aria-expanded="{active}">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Search"
|
||||
tabindex="{active ? '-1' : '0'}"
|
||||
class:bx--header__action="{true}"
|
||||
class:disabled="{active}"
|
||||
on:click="{() => {
|
||||
active = true;
|
||||
}}"
|
||||
>
|
||||
<Search20 title="Search" />
|
||||
</button>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
placeholder="Search..."
|
||||
tabindex="{active ? '0' : '-1'}"
|
||||
class:active
|
||||
{...$$restProps}
|
||||
id="search-input"
|
||||
aria-activedescendant="{selectedId}"
|
||||
bind:value
|
||||
on:change
|
||||
on:input
|
||||
on:focus
|
||||
on:blur
|
||||
on:keydown
|
||||
on:keydown="{(e) => {
|
||||
switch (e.key) {
|
||||
case 'Enter':
|
||||
selectResult();
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
if (selectedResultIndex === results.length - 1) {
|
||||
selectedResultIndex = 0;
|
||||
} else {
|
||||
selectedResultIndex += 1;
|
||||
}
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
if (selectedResultIndex === 0) {
|
||||
selectedResultIndex = results.length - 1;
|
||||
} else {
|
||||
selectedResultIndex -= 1;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}}"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Clear search"
|
||||
tabindex="{active ? '0' : '-1'}"
|
||||
class:bx--header__action="{true}"
|
||||
class:hidden="{!active}"
|
||||
on:click="{() => {
|
||||
reset();
|
||||
dispatch('clear');
|
||||
}}"
|
||||
>
|
||||
<Close20 title="Close" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if active && results.length > 0}
|
||||
<ul aria-labelledby="search-label" role="menu" id="search-menu">
|
||||
{#each results as result, i}
|
||||
<li>
|
||||
<a
|
||||
tabindex="-1"
|
||||
id="search-menuitem-{i}"
|
||||
role="menuitem"
|
||||
href="{result.href}"
|
||||
class:selected="{selectedId === `search-menuitem-${i}`}"
|
||||
on:click|preventDefault="{async () => {
|
||||
selectedResultIndex = i;
|
||||
await tick();
|
||||
selectResult();
|
||||
}}"
|
||||
>
|
||||
<slot result="{result}" index="{i}">
|
||||
{result.text}
|
||||
{#if result.description}<span>– {result.description}</span>{/if}
|
||||
</slot>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
label {
|
||||
position: absolute;
|
||||
|
|
@ -185,106 +288,3 @@
|
|||
color: #c6c6c6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window
|
||||
on:mouseup="{({ target }) => {
|
||||
if (active && !refSearch.contains(target)) active = false;
|
||||
}}"
|
||||
/>
|
||||
|
||||
<div bind:this="{refSearch}" role="search" class:active>
|
||||
<label for="search-input" id="search-label">Search</label>
|
||||
<div role="combobox" aria-expanded="{active}">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Search"
|
||||
tabindex="{active ? '-1' : '0'}"
|
||||
class:bx--header__action="{true}"
|
||||
class:disabled="{active}"
|
||||
on:click="{() => {
|
||||
active = true;
|
||||
}}"
|
||||
>
|
||||
<Search20 title="Search" />
|
||||
</button>
|
||||
<input
|
||||
bind:this="{ref}"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
placeholder="Search..."
|
||||
tabindex="{active ? '0' : '-1'}"
|
||||
class:active
|
||||
{...$$restProps}
|
||||
id="search-input"
|
||||
aria-activedescendant="{selectedId}"
|
||||
bind:value
|
||||
on:change
|
||||
on:input
|
||||
on:focus
|
||||
on:blur
|
||||
on:keydown
|
||||
on:keydown="{(e) => {
|
||||
switch (e.key) {
|
||||
case 'Enter':
|
||||
selectResult();
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
if (selectedResultIndex === results.length - 1) {
|
||||
selectedResultIndex = 0;
|
||||
} else {
|
||||
selectedResultIndex += 1;
|
||||
}
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
if (selectedResultIndex === 0) {
|
||||
selectedResultIndex = results.length - 1;
|
||||
} else {
|
||||
selectedResultIndex -= 1;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}}"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Clear search"
|
||||
tabindex="{active ? '0' : '-1'}"
|
||||
class:bx--header__action="{true}"
|
||||
class:hidden="{!active}"
|
||||
on:click="{() => {
|
||||
reset();
|
||||
dispatch('clear');
|
||||
}}"
|
||||
>
|
||||
<Close20 title="Close" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if active && results.length > 0}
|
||||
<ul aria-labelledby="search-label" role="menu" id="search-menu">
|
||||
{#each results as result, i}
|
||||
<li>
|
||||
<a
|
||||
tabindex="-1"
|
||||
id="search-menuitem-{i}"
|
||||
role="menuitem"
|
||||
href="{result.href}"
|
||||
class:selected="{selectedId === `search-menuitem-${i}`}"
|
||||
on:click|preventDefault="{async () => {
|
||||
selectedResultIndex = i;
|
||||
await tick();
|
||||
selectResult();
|
||||
}}"
|
||||
>
|
||||
<slot result="{result}" index="{i}">
|
||||
{result.text}
|
||||
{#if result.description}<span>– {result.description}</span>{/if}
|
||||
</slot>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue