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

update dees-tags

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-26 19:00:15 +00:00
parent b5a2bd7436
commit 1dbbac450c
5 changed files with 722 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
ts_web/pages/input-showcase.ts
View File

@ -377,6 +377,29 @@ export const inputShowcase = () => html`
.placeholder=${'Type and press Enter'}
></dees-input-typelist>
</dees-panel>
<dees-panel .title=${'Tags Input'} .subtitle=${'Add and manage tags with suggestions'}>
<div class="demo-grid">
<dees-input-tags
.label=${'Project Tags'}
.placeholder=${'Add tags...'}
.value=${['frontend', 'typescript', 'webcomponents']}
.description=${'Press Enter or comma to add'}
></dees-input-tags>
<dees-input-tags
.label=${'Technologies'}
.placeholder=${'Type to see suggestions...'}
.suggestions=${[
'React', 'Vue', 'Angular', 'Svelte',
'Node.js', 'Deno', 'Express', 'MongoDB'
]}
.value=${['React', 'Node.js']}
.maxTags=${5}
.description=${'Maximum 5 tags, with suggestions'}
></dees-input-tags>
</div>
</dees-panel>
</section>
<!-- Numeric Inputs Section -->

49
ts_web/pages/zindex-showcase.ts
View File

@ -8,6 +8,7 @@ import '../elements/dees-form.js';
import '../elements/dees-panel.js';
import '../elements/dees-input-text.js';
import '../elements/dees-input-radiogroup.js';
import '../elements/dees-input-tags.js';
import '../elements/dees-appui-profiledropdown.js';
export const showcasePage = () => html`
@ -512,6 +513,13 @@ export const showcasePage = () => html`
.label=${'Additional Field'}
.placeholder=${'Just to show form context'}
></dees-input-text>
<dees-input-tags
.label=${'Tags'}
.placeholder=${'Add tags...'}
.suggestions=${['urgent', 'bug', 'feature', 'documentation', 'testing']}
.description=${'Add relevant tags'}
></dees-input-tags>
</dees-form>
<p style="margin-top: 16px; color: ${cssManager.bdTheme('#666', '#999')}">
You can also right-click anywhere in this modal to test context menus.
@ -642,6 +650,47 @@ export const showcasePage = () => html`
}}>Show Multiple Toasts</dees-button>
</div>
<div class="demo-card">
<h4>Modal with Tags Input</h4>
<dees-button @click=${async () => {
await DeesModal.createAndShow({
heading: 'Tags Input Test',
width: 'medium',
content: html`
<p>Test the tags input component in a modal:</p>
<dees-form>
<dees-input-tags
.label=${'Search Terms'}
.placeholder=${'Enter search terms...'}
.value=${['typescript', 'modal']}
.suggestions=${[
'javascript', 'typescript', 'css', 'html',
'react', 'vue', 'angular', 'svelte',
'modal', 'dropdown', 'form', 'input'
]}
.description=${'Add search terms to filter results'}
></dees-input-tags>
<dees-input-tags
.label=${'Categories'}
.placeholder=${'Add categories...'}
.required=${true}
.maxTags=${3}
.description=${'Select up to 3 categories'}
></dees-input-tags>
</dees-form>
`,
menuOptions: [
{ name: 'Cancel', action: async (modal) => modal.destroy() },
{ name: 'Apply', action: async (modal) => {
DeesToast.createAndShow({ message: 'Tags applied!', type: 'success' });
modal.destroy();
}}
]
});
}}>Test Tags in Modal</dees-button>
</div>
<div class="demo-card">
<h4>Fullscreen Modal</h4>
<dees-button @click=${async () => {