118 lines
2.6 KiB
TypeScript
118 lines
2.6 KiB
TypeScript
import { html } from '@design.estate/dees-element';
|
|
import { injectCssVariables } from '../../00variables.js';
|
|
|
|
export const demoFunc = () => {
|
|
injectCssVariables();
|
|
return html`
|
|
<style>
|
|
.demo-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
.demo-section h3 {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 0.875rem;
|
|
color: var(--dees-muted-foreground);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.demo-grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
max-width: 400px;
|
|
}
|
|
.demo-row {
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
</style>
|
|
|
|
<div class="demo-section">
|
|
<h3>Basic Inputs</h3>
|
|
<div class="demo-grid">
|
|
<dees-mobile-input
|
|
placeholder="Enter text..."
|
|
></dees-mobile-input>
|
|
|
|
<dees-mobile-input
|
|
label="Email Address"
|
|
type="email"
|
|
placeholder="you@example.com"
|
|
></dees-mobile-input>
|
|
|
|
<dees-mobile-input
|
|
label="Password"
|
|
type="password"
|
|
placeholder="Enter password"
|
|
></dees-mobile-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Input Types</h3>
|
|
<div class="demo-grid">
|
|
<dees-mobile-input
|
|
label="Phone Number"
|
|
type="tel"
|
|
placeholder="+1 (555) 000-0000"
|
|
></dees-mobile-input>
|
|
|
|
<dees-mobile-input
|
|
label="Quantity"
|
|
type="number"
|
|
placeholder="0"
|
|
></dees-mobile-input>
|
|
|
|
<dees-mobile-input
|
|
label="Search"
|
|
type="search"
|
|
placeholder="Search..."
|
|
></dees-mobile-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>States</h3>
|
|
<div class="demo-grid">
|
|
<dees-mobile-input
|
|
label="Required Field"
|
|
placeholder="This field is required"
|
|
required
|
|
></dees-mobile-input>
|
|
|
|
<dees-mobile-input
|
|
label="Disabled Input"
|
|
placeholder="Cannot edit"
|
|
disabled
|
|
value="Read only value"
|
|
></dees-mobile-input>
|
|
|
|
<dees-mobile-input
|
|
label="With Error"
|
|
placeholder="Enter valid email"
|
|
type="email"
|
|
value="invalid-email"
|
|
error="Please enter a valid email address"
|
|
></dees-mobile-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h3>Autocomplete</h3>
|
|
<div class="demo-grid">
|
|
<dees-mobile-input
|
|
label="Username"
|
|
autocomplete="username"
|
|
placeholder="Enter username"
|
|
></dees-mobile-input>
|
|
|
|
<dees-mobile-input
|
|
label="Current Password"
|
|
type="password"
|
|
autocomplete="current-password"
|
|
placeholder="Enter password"
|
|
></dees-mobile-input>
|
|
</div>
|
|
</div>
|
|
`;
|
|
};
|