mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Paweł Kuna
247 lines
11 KiB
Plaintext
247 lines
11 KiB
Plaintext
---
|
|
// Port of preview/pages/form-elements.html
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
|
|
import FormElements1 from '@shared/components/forms/FormElements1.astro';
|
|
import FormElements2 from '@shared/components/forms/FormElements2.astro';
|
|
import FormElements3 from '@shared/components/forms/FormElements3.astro';
|
|
import FormElements4 from '@shared/components/forms/FormElements4.astro';
|
|
import FormElements5 from '@shared/components/forms/FormElements5.astro';
|
|
import FormElements6 from '@shared/components/forms/FormElements6.astro';
|
|
import Layout from '@shared/components/cards/form/Layout.astro';
|
|
import InputIcon from '@shared/components/ui/form/InputIcon.astro';
|
|
import InputMask from '@shared/components/ui/form/InputMask.astro';
|
|
import Button from '@shared/components/Button.astro';
|
|
import Avatar from '@shared/components/ui/Avatar.astro';
|
|
import people from '@data/people.json';
|
|
|
|
const httpMethods = ['GET', 'POST', 'PUT', 'HEAD', 'DELETE', 'PATCH'];
|
|
const comparisons = [
|
|
['EQUALS', 'Equals'], ['NOT_EQUALS', 'Not equals'], ['HAS_KEY', 'Has key'],
|
|
['NOT_HAS_KEY', 'Not has key'], ['HAS_VALUE', 'Has value'], ['NOT_HAS_VALUE', 'Not has value'],
|
|
['IS_EMPTY', 'Is empty'], ['NOT_EMPTY', 'Is not empty'], ['GREATER_THAN', 'Greater than'],
|
|
['LESS_THAN', 'Less than'],
|
|
];
|
|
const sources = [
|
|
['STATUS_CODE', 'Status code'], ['JSON_BODY', 'JSON body'], ['HEADERS', 'Headers'],
|
|
['TEXT_BODY', 'Text body'], ['RESPONSE_TIME', 'Response time'],
|
|
];
|
|
// assertion rows: [sourceSel, targetVal, comparisonSel]
|
|
const rows = [
|
|
{ source: 'STATUS_CODE', comparison: 'EQUALS', target: '200', prop: '' },
|
|
{ source: 'JSON_BODY', comparison: 'HAS_VALUE', target: 'string', prop: 'parameters.alt.type' },
|
|
{ source: 'RESPONSE_TIME', comparison: 'LESS_THAN', target: '500', prop: '' },
|
|
{ source: 'HEADERS', comparison: 'EQUALS', target: 'application/json; charset=UTF-8', prop: 'content-type' },
|
|
];
|
|
---
|
|
|
|
<DefaultLayout
|
|
title="Form elements"
|
|
pageHeader="Form elements"
|
|
pageMenu="form.elements"
|
|
pageLibs={['nouislider', 'autosize', 'tabler-flags', 'tabler-payments', 'litepicker', 'tom-select', 'imask']}
|
|
>
|
|
<div class="row row-cards">
|
|
<div class="col-12">
|
|
<form action="https://httpbin.org/post" method="post" class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Form elements</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-5">
|
|
<div class="col-xl-4">
|
|
<div class="row">
|
|
<div class="col-md-6 col-xl-12"><FormElements1 /></div>
|
|
<div class="col-md-6 col-xl-12"><FormElements2 /></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4">
|
|
<div class="row">
|
|
<div class="col-md-6 col-xl-12"><FormElements3 /></div>
|
|
<div class="col-md-6 col-xl-12"><FormElements4 /></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-4">
|
|
<div class="row">
|
|
<div class="col-md-6 col-xl-12"><FormElements5 /></div>
|
|
<div class="col-md-6 col-xl-12"><FormElements6 /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer text-end">
|
|
<div class="d-flex">
|
|
<a href="#" class="btn btn-link">Cancel</a>
|
|
<button type="submit" class="btn btn-primary ms-auto">Send data</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card h-100">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Project ID</h3>
|
|
<p class="card-subtitle">Used when interacting with the API.</p>
|
|
<InputIcon icon="files" value="prj_5ae74426fe935327a8fa178b07d84ad9" readonly />
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="row align-items-center">
|
|
<div class="col">Learn more about <a href="#">Project ID</a></div>
|
|
<div class="col-auto"><Button text="Save" color="primary" /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Node.js Version</h3>
|
|
<p class="card-subtitle">
|
|
The version of Node.js that is used in the Build Step and for Serverless Functions. A new Deployment is required for your changes to take effect.
|
|
</p>
|
|
<select class="form-select">
|
|
<option>14.x</option>
|
|
<option>12.x</option>
|
|
</select>
|
|
</div>
|
|
<div class="card-footer">Learn more about <a href="#">Node.js Version</a></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-4"><Layout /></div>
|
|
|
|
<div class="col-lg-8">
|
|
<div class="row row-cards">
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header"><h3 class="card-title">Input mask</h3></div>
|
|
<div class="card-body">
|
|
<div class="mb-3"><label class="form-label">Date</label><InputMask mask="00/00/0000" visible /></div>
|
|
<div class="mb-3"><label class="form-label">Hour</label><InputMask mask="00:00:00" visible /></div>
|
|
<div class="mb-3"><label class="form-label">Date & Hour</label><InputMask mask="00/00/0000 00:00:00" visible /></div>
|
|
<div class="mb-3"><label class="form-label">ZIP Code</label><InputMask mask="00000-000" visible /></div>
|
|
<div class="mb-3"><label class="form-label">Money</label><InputMask mask="000.000.000.000.000,00" visible reverse /></div>
|
|
<div class="mb-3"><label class="form-label">Telephone</label><InputMask mask="0000-0000" visible /></div>
|
|
<div class="mb-3"><label class="form-label">Telephone with Code Area</label><InputMask mask="(00) 0000-0000" visible /></div>
|
|
<div class="mb-3"><label class="form-label">IP Address</label><InputMask mask="099.099.099.099" placeholder="000.000.000.000" visible /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-6">
|
|
<form class="card h-100">
|
|
<div class="card-header"><h3 class="card-title">My Profile</h3></div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="row">
|
|
<div class="col-auto"><Avatar person={people[2]} size="md" /></div>
|
|
<div class="col">
|
|
<div class="mb-3">
|
|
<label class="form-label">Email-Address</label>
|
|
<input class="form-control" placeholder="your-email@domain.com" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Bio</label>
|
|
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Email-Address</label>
|
|
<input class="form-control" placeholder="your-email@domain.com" />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Password</label>
|
|
<input type="password" class="form-control" value="password" />
|
|
</div>
|
|
</div>
|
|
<div class="card-footer text-end"><Button text="Save" color="primary" /></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-12">
|
|
<div class="row row-cards">
|
|
<div class="col-12 col-lg-6">
|
|
<form class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Edit Profile</h3>
|
|
<div class="row row-cards">
|
|
<div class="col-md-5"><div class="mb-3"><label class="form-label">Company</label><input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc." /></div></div>
|
|
<div class="col-sm-6 col-md-3"><div class="mb-3"><label class="form-label">Username</label><input type="text" class="form-control" placeholder="Username" value="michael23" /></div></div>
|
|
<div class="col-sm-6 col-md-4"><div class="mb-3"><label class="form-label">Email address</label><input type="email" class="form-control" placeholder="Email" /></div></div>
|
|
<div class="col-sm-6 col-md-6"><div class="mb-3"><label class="form-label">First Name</label><input type="text" class="form-control" placeholder="Company" value="Chet" /></div></div>
|
|
<div class="col-sm-6 col-md-6"><div class="mb-3"><label class="form-label">Last Name</label><input type="text" class="form-control" placeholder="Last Name" value="Faker" /></div></div>
|
|
<div class="col-md-12"><div class="mb-3"><label class="form-label">Address</label><input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia" /></div></div>
|
|
<div class="col-sm-6 col-md-4"><div class="mb-3"><label class="form-label">City</label><input type="text" class="form-control" placeholder="City" value="Melbourne" /></div></div>
|
|
<div class="col-sm-6 col-md-3"><div class="mb-3"><label class="form-label">Postal Code</label><input type="test" class="form-control" placeholder="ZIP Code" /></div></div>
|
|
<div class="col-md-5"><div class="mb-3"><label class="form-label">Country</label><select class="form-control form-select"><option value="">Germany</option></select></div></div>
|
|
<div class="col-md-12">
|
|
<div class="mb-3 mb-0">
|
|
<label class="form-label">About Me</label>
|
|
<textarea rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Oh so, your weak rhyme
|
|
You doubt I'll bother, reading into it
|
|
I'll probably won't, left to my own devices
|
|
But that's the difference in our opinions.</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer text-end"><button type="submit" class="btn btn-primary">Update Profile</button></div>
|
|
</form>
|
|
</div>
|
|
<div class="col-12 col-lg-6">
|
|
<div class="card h-100">
|
|
<div class="card-header"><h3 class="card-title">HTTP Request</h3></div>
|
|
<div class="card-body">
|
|
<div class="row row-cards">
|
|
<div class="mb-3 col-sm-4 col-md-2">
|
|
<label class="form-label required">Method</label>
|
|
<select class="form-select">
|
|
{httpMethods.map((m) => <option value={m}>{m}</option>)}
|
|
</select>
|
|
</div>
|
|
<div class="mb-3 col-sm-8 col-md-10">
|
|
<label class="form-label required">URL</label>
|
|
<input name="url" type="text" class="form-control" value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest" />
|
|
</div>
|
|
</div>
|
|
<div class="form-label">Assertions</div>
|
|
<div class="table-responsive">
|
|
<table class="table mb-0">
|
|
<thead>
|
|
<tr><th>Source</th><th>Property</th><th>Comparison</th><th>Target</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{
|
|
rows.map((row) => (
|
|
<tr>
|
|
<td>
|
|
<select class="form-select">
|
|
{sources.map(([v, l]) => <option value={v} selected={v === row.source || undefined}>{l}</option>)}
|
|
</select>
|
|
</td>
|
|
<td><input type="text" class="form-control" value={row.prop || undefined} /></td>
|
|
<td>
|
|
<select class="form-select">
|
|
{comparisons.map(([v, l]) => <option value={v} selected={v === row.comparison || undefined}>{l}</option>)}
|
|
</select>
|
|
</td>
|
|
<td><input type="text" class="form-control" value={row.target} /></td>
|
|
</tr>
|
|
))
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer text-end"><button type="submit" class="btn btn-primary">Make request</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|