Strawberry

Svelte utils and components.

Installation

npm i @kwangure/strawberry

General usage

Button

<script>
    import '@kwangure/strawberry/css/button.css';

    let count = 0;
</script>

<button on:click={() => count++}>
    Increment Counter: {count}
</button>

Code

<script>
    import { javascript } from '@kwangure/strawberry/code';

    const code = 'const five = 5;\nconst thirty = five * 6';
</script>

<code>
    {#each javascript(code) as { segment, color }}
        <span class='br-token-{color}'>{segment}</span>
    {/each}
</code>

Dialog

<script>
    import { Dialog } from '@kwangure/strawberry/default/dialog';

    /** @type {false | 'modal' | 'non-modal'} */
    let open;
</script>

<Dialog bind:open>
    Nice to meet you
    <button on:click={() => open = false}>👋 Bye!</button>
</Dialog>

<button on:click={() => open = 'modal'}>Show</button>
<button on:click={() => open = 'non-modal'}>Show modal</button>

Dropdown

<script>
    import { Dropdown, Popup } from '@kwangure/strawberry/default/dropdown';
</script>

<Dropdown>
    <button slot="trigger">
        Click for dropdown
    </button>
    <Popup>
        <div class="br-focusable">Purple</div>
        <div class="br-focusable">Penguin</div>
        <div class="br-focusable">Has</div>
        <div class="br-focusable">Landed</div>
    </Popup>
</Dropdown>

Element

<script>
    import { Element } from '@kwangure/strawberry/default/element';

    const element = {
        type: 'p',
        props: {
            style: 'font-style: italic; color: red;',
        },
        children: ['I am a dynamically generated red <p/> tag element.'],
    };
</script>

<Element {element}/>

Inputs

<script>
    import { Container } from '@kwangure/strawberry/default/input/container';
</script>

<Container let:inputId>
    <label slot='label' for={inputId}>
        This is the input label
    </label>
    <input id={inputId} placeholder="I can say anything!"/>
</Container>

<Container let:inputId>
    <label slot='label' for={inputId}>
        Pick a pizza toping.
    </label>
    <select id={inputId}>
        <option>Pineapple</option>
        <option>Pepperoni</option>
        <option>Peppers</option>
    </select>
</Container>

Switch

<script>
    import { Switch } from '$lib/default/switch';

    let checked = true;
</script>

<Switch bind:checked/> {checked ? '': 'un'}checked

License

Apache 2.0 © Kafungo Wangure