120 lines
4.4 KiB
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: 'Hours',
|
|
m: 'Minutes',
|
|
s: 'Seconds',
|
|
}} 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>
|
|
|
|
|