mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-19 20:09:35 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(toolbar-search): add disabled state

Browse source
This commit is contained in:
Eric Liu 2021-02-03 16:19:17 -08:00
commit edc361d392
4 changed files with 25 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/DataTable/ToolbarSearch.svelte
View file

@ -11,6 +11,9 @@
/** Set to `true` to keep the search bar expanded */
export let persistent = false;
/** Set to `true` to disable the search bar */
export let disabled = false;
/** Specify the tabindex */
export let tabindex = "0";
@ -21,10 +24,10 @@
export let ref = null;
import { tick } from "svelte";
import { Search } from "../Search";
import Search from "../Search/Search.svelte";
async function expandSearch() {
if (persistent || expanded) return;
if (disabled || persistent || expanded) return;
expanded = true;
await tick();
ref.focus();
@ -32,17 +35,19 @@
</script>
<div
tabindex="{expanded ? '-1' : tabindex}"
tabindex="{expanded || disabled ? '-1' : tabindex}"
class:bx--toolbar-action="{true}"
class:bx--toolbar-search-container-active="{expanded}"
class:bx--toolbar-search-container-expandable="{!persistent}"
class:bx--toolbar-search-container-persistent="{persistent}"
class:bx--toolbar-search-container-disabled="{disabled}"
on:click="{expandSearch}"
on:focus="{expandSearch}"
>
<Search
size="sm"
tabindex="{expanded ? tabindex : '-1'}"
disabled="{disabled}"
{...$$restProps}
bind:ref
bind:value