design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance demo components with new input types and layout options

Browse Source 
- 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.
This commit is contained in:
Jürgen Kunz
2025-06-19 11:39:16 +00:00
parent 79b1a4ea9f
commit 03315db863
26 changed files with 2547 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
ts_web/elements/dees-simple-appdash.demo.ts
View File

@@ -3,6 +3,8 @@ import type { IView } from './dees-simple-appdash.js';
import './dees-form.js';
import './dees-input-text.js';
import './dees-input-checkbox.js';
import './dees-input-dropdown.js';
import './dees-input-radio.js';
import './dees-form-submit.js';
import './dees-statsgrid.js';
import type { IStatsTile } from './dees-statsgrid.js';
@@ -157,6 +159,12 @@ class DemoViewSettings extends DeesElement {
margin: 0 0 15px 0;
color: ${cssManager.bdTheme('#333', '#ccc')};
}
.horizontal-form-section {
background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
padding: 20px;
border-radius: 8px;
margin: 15px 0;
}
`
];
@@ -170,8 +178,68 @@ class DemoViewSettings extends DeesElement {
<dees-form>
<dees-input-text key="appName" label="Application Name" value="My App"></dees-input-text>
<dees-input-text key="apiEndpoint" label="API Endpoint" value="https://api.example.com"></dees-input-text>
<dees-input-dropdown
key="environment"
label="Environment"
.options=${[
{ option: 'Development', key: 'dev' },
{ option: 'Staging', key: 'staging' },
{ option: 'Production', key: 'prod' }
]}
.selectedOption=${{ option: 'Production', key: 'prod' }}
></dees-input-dropdown>
<dees-input-checkbox key="enableNotifications" label="Enable Notifications" value="true"></dees-input-checkbox>
<dees-form-submit>Save Settings</dees-form-submit>
<dees-input-checkbox key="enableAnalytics" label="Enable Analytics" value="false"></dees-input-checkbox>
<dees-form-submit>Save General Settings</dees-form-submit>
</dees-form>
</div>
<div class="settings-section">
<h2>Display Preferences</h2>
<div class="horizontal-form-section">
<p style="margin-top: 0; margin-bottom: 16px;">Quick display settings using horizontal layout:</p>
<dees-form horizontal-layout>
<dees-input-dropdown
key="theme"
label="Theme"
.enableSearch=${false}
.options=${[
{ option: 'Light', key: 'light' },
{ option: 'Dark', key: 'dark' },
{ option: 'Auto', key: 'auto' }
]}
.selectedOption=${{ option: 'Dark', key: 'dark' }}
></dees-input-dropdown>
<dees-input-dropdown
key="language"
label="Language"
.enableSearch=${false}
.options=${[
{ option: 'English', key: 'en' },
{ option: 'German', key: 'de' },
{ option: 'Spanish', key: 'es' },
{ option: 'French', key: 'fr' }
]}
.selectedOption=${{ option: 'English', key: 'en' }}
></dees-input-dropdown>
<dees-input-checkbox key="compactMode" label="Compact Mode"></dees-input-checkbox>
</dees-form>
</div>
</div>
<div class="settings-section">
<h2>Notification Settings</h2>
<dees-form>
<div style="margin-bottom: 16px;">
<div style="font-weight: 500; margin-bottom: 8px;">Email Frequency:</div>
<dees-input-radio label="Real-time" value="true" key="email-realtime"></dees-input-radio>
<dees-input-radio label="Daily Digest" key="email-daily"></dees-input-radio>
<dees-input-radio label="Weekly Summary" key="email-weekly"></dees-input-radio>
<dees-input-radio label="Never" key="email-never"></dees-input-radio>
</div>
<dees-input-checkbox key="pushNotifications" label="Enable Push Notifications" value="true"></dees-input-checkbox>
<dees-input-checkbox key="soundAlerts" label="Play Sound for Alerts" value="true"></dees-input-checkbox>
<dees-form-submit>Update Notifications</dees-form-submit>
</dees-form>
</div>
`;