119 lines
3.5 KiB
TypeScript
119 lines
3.5 KiB
TypeScript
import type { Component } from 'solid-js';
|
|
import { createSignal } from 'solid-js';
|
|
import {
|
|
SSChip,
|
|
SSDivider,
|
|
SSForm,
|
|
SSHeader,
|
|
SSSurface,
|
|
} from 'src';
|
|
import { peopleOptions, stackSuggestions, teamOptions } from '../../demo/content';
|
|
|
|
const FormsPage: Component = () => {
|
|
const [result, setResult] = createSignal<string | null>(null);
|
|
|
|
return (
|
|
<div class="demo_page">
|
|
<SSHeader title="Forms" subtitle="Inputs, selections, and validation in one place." />
|
|
|
|
<SSSurface class="demo_surface">
|
|
<SSForm
|
|
onsubmit={async (context) => {
|
|
const values = await context.getValues();
|
|
setResult(JSON.stringify(values, null, 2));
|
|
}}
|
|
>
|
|
<div class="demo_form_grid">
|
|
<SSForm.Input label="Project name" name="project" required />
|
|
<SSForm.Input label="Email" name="email" type="email" required />
|
|
<SSForm.Input label="Password" name="password" type="password" required />
|
|
<SSForm.Input label="Contact phone" name="phone" type="tel" />
|
|
</div>
|
|
|
|
<SSForm.Input
|
|
label="Message"
|
|
name="message"
|
|
textArea
|
|
/>
|
|
|
|
<SSForm.Input
|
|
label="Tech stack"
|
|
name="stack"
|
|
suggestions={{
|
|
prepare: () => stackSuggestions,
|
|
getItems: ({ query, init }) =>
|
|
init.filter((item) => item.toLowerCase().includes(query)).slice(0, 5),
|
|
stringify: ({ item }) => item,
|
|
}}
|
|
/>
|
|
|
|
<div class="demo_form_grid">
|
|
<SSForm.Date label="Start date" name="startDate" editable />
|
|
<SSForm.Date label="Target date" name="targetDate" />
|
|
</div>
|
|
|
|
<div class="demo_form_grid">
|
|
<SSForm.Select
|
|
label="Team"
|
|
name="team"
|
|
getOptions={() => teamOptions}
|
|
buildOption={(item) => item.label}
|
|
/>
|
|
<SSForm.Checkbox label="Notify stakeholders" name="notify" />
|
|
</div>
|
|
|
|
<SSDivider />
|
|
|
|
<SSForm.ACSelect
|
|
label="Invite members"
|
|
name="members"
|
|
minSelectedItems={1}
|
|
getOptions={({ query }) =>
|
|
peopleOptions.filter((item) =>
|
|
item.name.toLowerCase().includes(query.toLowerCase())
|
|
)
|
|
}
|
|
renderItem={({ item }) => (
|
|
<div class="demo_ac_item">
|
|
<strong>{item.name}</strong>
|
|
<span>{item.role}</span>
|
|
</div>
|
|
)}
|
|
/>
|
|
|
|
<SSForm.ACSelect
|
|
label="Primary owner"
|
|
name="owner"
|
|
maxSelectedItems={1}
|
|
getOptions={({ query }) =>
|
|
peopleOptions.filter((item) =>
|
|
item.name.toLowerCase().includes(query.toLowerCase())
|
|
)
|
|
}
|
|
renderItem={({ item }) => (
|
|
<div class="demo_ac_item">
|
|
<strong>{item.name}</strong>
|
|
<span>{item.role}</span>
|
|
</div>
|
|
)}
|
|
renderSelection={({ item }) => (
|
|
<SSChip color="indigo">{item.name}</SSChip>
|
|
)}
|
|
/>
|
|
|
|
<SSForm.SubmitButton>Save form</SSForm.SubmitButton>
|
|
</SSForm>
|
|
</SSSurface>
|
|
|
|
{result() && (
|
|
<SSSurface class="demo_surface">
|
|
<div class="demo_section_title">Submitted values</div>
|
|
<pre class="demo_code">{result()}</pre>
|
|
</SSSurface>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FormsPage;
|