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

refactor: use $$restProps API

Browse source 
- add ref prop for applicable components (#196)
- add slot to Content Switcher `Switch` component (#183)
- remove fillArray, css utilities
This commit is contained in:
Eric Liu 2020-07-18 20:00:20 -07:00
commit e886d772c7
288 changed files with 4681 additions and 4498 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/components/ComboBox/ComboBox.Story.svelte
View file

@ -1,23 +1,25 @@
<script>
import Layout from '../../internal/ui/Layout.svelte';
import ToggleSmall from '../ToggleSmall';
import Button from '../Button';
import ComboBox from './ComboBox.svelte';
import { ToggleSmall } from "../ToggleSmall";
import { Button } from "../Button";
import ComboBox from "./ComboBox.svelte";
let items = [
{ id: 'option-0', text: 'Option 1' },
{ id: 'option-1', text: 'Option 2' },
{ id: 'option-2', text: 'Option 3' },
{ id: 'option-3', text: 'Option 4' },
{ id: "option-0", text: "Option 1" },
{ id: "option-1", text: "Option 2" },
{ id: "option-2", text: "Option 3" },
{ id: "option-3", text: "Option 4" },
{
id: 'option-4',
text: 'An example option that is really long to show what should be done to handle long text'
id: "option-4",
text:
"An example option that is really long to show what should be done to handle long text"
}
];
let toggled = false;
let value = undefined;
let selectedIndex = -1;
$: toggled = false;
$: value = undefined;
$: selectedIndex = -1;
$: ref = null;
$: ref && ref.focus();
function shouldFilterItem(item, value) {
if (!toggled || !value) {
@ -28,26 +30,34 @@
}
</script>
<Layout>
<p>Currently, this component does not support items as slots.</p>
<p>
<code>items</code>
must be an array of objects; mandatory fields are `id` and `text`.
</p>
<pre style="margin-top: 1rem;">
<code>{'items = Array<{ id: string; text: string; }>'}</code>
</pre>
<div style="margin-top: 2rem;">
<ToggleSmall labelText="Enable filtering" bind:toggled />
<Button
size="small"
on:click={() => {
selectedIndex = 1;
}}>
Set item to 'Option 2'
</Button>
</div>
<div style="width: 300px; margin-top: 2rem;">
<ComboBox {...$$props} id="combobox" bind:value bind:selectedIndex {items} {shouldFilterItem} />
</div>
</Layout>
<p>Currently, this component does not support items as slots.</p>
<p>
<code>items</code>
must be an array of objects; mandatory fields are `id` and `text`.
</p>
<pre style="margin-top: 1rem;">
<code>{'items = Array<{ id: string; text: string; }>'}</code>
</pre>
<div style="margin-top: 2rem;">
<ToggleSmall
labelText="Enable filtering"
bind:toggled
style="margin-top: 1rem;" />
<Button
size="small"
on:click={() => {
selectedIndex = 1;
}}>
Set item to 'Option 2'
</Button>
</div>
<div style="width: 300px; margin-top: 2rem;">
<ComboBox
{...$$props}
id="combobox"
bind:ref
bind:value
bind:selectedIndex
{items}
{shouldFilterItem} />
</div>