03315db863
- Added dropdown and radio input components to the demo for application settings. - Introduced horizontal layout for display preferences and notification settings. - Implemented checkbox demo with programmatic selection and clear functionality. - Created file upload and quantity selector demos with various states and configurations. - Added comprehensive radio input demo showcasing group behavior and various states. - Developed text input demo with validation states and advanced features like password visibility. - Introduced a new panel component for better content organization in demos.
127 lines
4.1 KiB
TypeScript
127 lines
4.1 KiB
TypeScript
import { html, css, cssManager } from '@design.estate/dees-element';
|
|
|
|
export const demoFunc = () => html`
|
|
<dees-demowrapper>
|
|
<style>
|
|
${css`
|
|
.demo-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding: 24px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.shopping-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.product-card {
|
|
padding: 16px;
|
|
background: ${cssManager.bdTheme('#fff', '#2a2a2a')};
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
|
|
}
|
|
|
|
.product-name {
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.product-price {
|
|
color: #1976d2;
|
|
margin-bottom: 16px;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
|
|
<dees-input-quantityselector
|
|
.label=${'Quantity'}
|
|
.description=${'Select the desired quantity'}
|
|
.value=${1}
|
|
></dees-input-quantityselector>
|
|
|
|
<dees-input-quantityselector
|
|
.label=${'Items in Cart'}
|
|
.description=${'Adjust the quantity of items'}
|
|
.value=${3}
|
|
></dees-input-quantityselector>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Shopping Cart'} .subtitle=${'Product cards with quantity selectors'}>
|
|
<div class="shopping-grid">
|
|
<div class="product-card">
|
|
<div class="product-name">Premium Headphones</div>
|
|
<div class="product-price">$199.99</div>
|
|
<dees-input-quantityselector
|
|
.label=${'Quantity'}
|
|
.layoutMode=${'horizontal'}
|
|
.value=${1}
|
|
></dees-input-quantityselector>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<div class="product-name">Wireless Mouse</div>
|
|
<div class="product-price">$49.99</div>
|
|
<dees-input-quantityselector
|
|
.label=${'Quantity'}
|
|
.layoutMode=${'horizontal'}
|
|
.value=${2}
|
|
></dees-input-quantityselector>
|
|
</div>
|
|
|
|
<div class="product-card">
|
|
<div class="product-name">USB-C Cable</div>
|
|
<div class="product-price">$19.99</div>
|
|
<dees-input-quantityselector
|
|
.label=${'Quantity'}
|
|
.layoutMode=${'horizontal'}
|
|
.value=${1}
|
|
></dees-input-quantityselector>
|
|
</div>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
|
|
<dees-input-quantityselector
|
|
.label=${'Number of Licenses'}
|
|
.description=${'Select how many licenses you need'}
|
|
.required=${true}
|
|
.value=${1}
|
|
></dees-input-quantityselector>
|
|
|
|
<dees-input-quantityselector
|
|
.label=${'Fixed Quantity'}
|
|
.description=${'This quantity cannot be changed'}
|
|
.disabled=${true}
|
|
.value=${5}
|
|
></dees-input-quantityselector>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>
|
|
<dees-form>
|
|
<dees-input-text .label=${'Customer Name'} .required=${true}></dees-input-text>
|
|
<dees-input-dropdown
|
|
.label=${'Product'}
|
|
.options=${['Basic Plan', 'Pro Plan', 'Enterprise Plan']}
|
|
.required=${true}
|
|
></dees-input-dropdown>
|
|
<dees-input-quantityselector
|
|
.label=${'Quantity'}
|
|
.description=${'Number of licenses'}
|
|
.value=${1}
|
|
></dees-input-quantityselector>
|
|
<dees-input-text
|
|
.label=${'Special Instructions'}
|
|
.inputType=${'textarea'}
|
|
></dees-input-text>
|
|
</dees-form>
|
|
</dees-panel>
|
|
</div>
|
|
</dees-demowrapper>
|
|
`; |