swaf/src/assets/views/design.svelte

120 lines
4.4 KiB
Svelte

<script>
import {route} from "../../common/Routing";
import BaseLayout from "./layouts/BaseLayout.svelte";
import Message from "./components/Message.svelte";
import Form from "./utils/Form.svelte";
import Field from "./utils/Field.svelte";
import Pagination from "./components/Pagination.svelte";
import {Pagination as PaginationData} from "../../common/Pagination.js";
import Breadcrumb from "./components/Breadcrumb.svelte";
import Icon from "./utils/Icon.svelte";
import DesignButtons from "./DesignButtons.svelte";
const paginationData = new PaginationData(20, 20, 1000).serialize();
</script>
<BaseLayout title="Design test">
<DesignButtons/>
<div class="panel">
<h2>
<Icon name="git-commit"/>
Common elements
</h2>
<p>Paragraph</p>
<p>Paragraph, <a href={route('home')}>Link</a></p>
<ul>
<li>Unordered</li>
<li>List</li>
</ul>
<ol>
<li>Ordered</li>
<li>List</li>
</ol>
<DesignButtons/>
</div>
<div class="panel">
<h2>
<Icon name="eye-off"/>
Discreet messages
</h2>
<Message type="success" content="Discreet success." discreet/>
<Message type="info" content="Discreet info." discreet/>
<Message type="warning" content="Discreet warning." discreet/>
<Message type="error" content="Discreet sticky error." discreet sticky/>
<Message type="error-alert" content="Discreet error-alert." discreet/>
</div>
<div class="panel">
<h2>
<Icon name="file-text"/>
Forms
</h2>
<Form action="javascript: void(0)"
submitText="Submit" submitIcon="check"
confirm="Are you sure?">
<Field type="text" name="text" placeholder="Text field" icon="type"
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="password" name="password" placeholder="Password field" icon="key"
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="duration" name="duration" placeholder="Duration field" icon="clock" extraData={[
'h',
'm',
's',
]} hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="select" name="select" placeholder="Select field" icon="list" extraData={[
'Option 1',
'Option 2',
'Option 3',
]} hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="textarea" name="textarea" placeholder="Textarea field" icon="file-text"
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="checkbox" name="checkbox" placeholder="Checkbox field" icon="check-square"
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="color" name="color" placeholder="Color field" icon="aperture"
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="file" name="file" placeholder="Choose a file" icon="upload"
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="file" name="files" placeholder="Choose files" icon="upload" multiple
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="text" name="disabled_text" placeholder="Disabled text field" icon="type" disabled
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
</Form>
</div>
<div class="panel">
<h2>
<Icon name="file"/>
Pagination
</h2>
<Pagination routeName="home" contextSize="3" pagination={paginationData}/>
</div>
<div class="panel">
<h2>
<Icon name="map-pin"/>
Breadcrumb
</h2>
<Breadcrumb currentPageTitle="Design test" pages={[
{link: route('home'), title: 'Home'},
{link: route('home'), title: 'Home again'},
{link: route('design'), title: 'self'},
]}/>
</div>
</BaseLayout>