svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

extend examples with all components

Browse Source
This commit is contained in:
Elijah Duffy
2025-07-03 09:58:34 -07:00
parent 08a4ecbafc
commit f2994abad2
2 changed files with 85 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/PinInput.svelte
View File

@@ -15,7 +15,7 @@
length: number;
required?: boolean;
name: string;
value: string;
value?: string;
oncomplete?: (value: string) => void;
onchange?: (value: string) => void;
} = $props();

85
src/routes/+page.svelte
View File

@@ -3,6 +3,18 @@
import Checkbox from '$lib/Checkbox.svelte';
import Combobox from '$lib/Combobox.svelte';
import Dateinput from '$lib/Dateinput.svelte';
import FramelessButton from '$lib/FramelessButton.svelte';
import Link from '$lib/Link.svelte';
import PhoneInput from '$lib/PhoneInput.svelte';
import PinInput from '$lib/PinInput.svelte';
import RadioGroup from '$lib/RadioGroup.svelte';
import Select from '$lib/Select.svelte';
import StyledRawInput from '$lib/StyledRawInput.svelte';
import TextInput from '$lib/TextInput.svelte';
import TimeInput from '$lib/TimeInput.svelte';
import TimezoneInput from '$lib/TimezoneInput.svelte';
import ToggleGroup from '$lib/ToggleGroup.svelte';
import ToggleSelect from '$lib/ToggleSelect.svelte';
let dateInputValue = $state<Date | undefined>(undefined);
</script>
@@ -17,12 +29,16 @@
<h2 class="mb-2 text-2xl font-semibold">Component Library</h2>
<div class="component">
<p class="title">Button</p>
<p class="title">Button, Frameless Button, & Link</p>
<div class="flex gap-4">
<Button icon="add" loading={false} onclick={() => alert('Button clicked!')}>Click Me</Button>
<Button icon="add" loading={true} onclick={() => alert('Button clicked!')}
>Loading Button</Button
>
<FramelessButton icon="add">Click Me</FramelessButton>
<Link href="https://svelte.dev">Visit Svelte</Link>
</div>
</div>
@@ -75,6 +91,73 @@
</div>
</div>
<div class="component">
<p class="title">Phone Input</p>
<PhoneInput label="Phone Number" name="phone" defaultISO="CA" />
</div>
<div class="component">
<p class="title">Pin Input</p>
<PinInput name="pin" length={6} />
</div>
<div class="component">
<p class="title">Radio Group</p>
<RadioGroup
name="example-radio-group"
label="Choose an option"
items={['male', 'female', 'other', 'prefer not to say']}
/>
</div>
<div class="component">
<p class="title">Select</p>
<Select
name="example-select"
label="Select an option"
options={[
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' }
]}
/>
</div>
<div class="component">
<p class="title">Styled Raw Input, Text Input</p>
<StyledRawInput name="example-raw-input" placeholder="Type here..." />
<TextInput name="example-text-input" placeholder="Enter text..." />
</div>
<div class="component">
<p class="title">Time Input</p>
<TimeInput name="example-time-input" label="Enter a time" />
</div>
<div class="component">
<p class="title">TimezoneInput</p>
<TimezoneInput name="example-timezone" label="Pick your timezone" />
</div>
<div class="component">
<p class="title">Toggle Group</p>
<ToggleGroup
name="example-toggle-group"
label="Toggler"
items={['item one', 'item two', 'item three']}
/>
</div>
<div class="component">
<p class="title">Toggle Select</p>
<ToggleSelect name="example-toggle-select">Toggle Me!</ToggleSelect>
</div>
<style lang="postcss">
@reference '$lib/styles/theme.css';