@kwangure/strawberry

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