feat(demo): add demoGroup metadata to components and update related dependencies

This commit is contained in:
2026-01-04 17:09:18 +00:00
parent aafdb4af72
commit 9bd1734d09
52 changed files with 136 additions and 86 deletions

View File

@@ -20,6 +20,7 @@ import { themeDefaultStyles } from '../../00theme.js';
export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI {
// STATIC
public static demo = demoFunc;
public static demoGroup = 'App UI';
// INSTANCE PROPERTIES
@state()

View File

@@ -28,6 +28,7 @@ declare global {
@customElement('dees-appui-appbar')
export class DeesAppuiBar extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'App UI';
// INSTANCE PROPERTIES
@property({ type: Array })

View File

@@ -26,6 +26,7 @@ declare global {
@customElement('dees-appui-bottombar')
export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
public static demo = demoFunc;
public static demoGroup = 'App UI';
// INSTANCE PROPERTIES
@state()

View File

@@ -31,6 +31,7 @@ export class DeesAppuiMaincontent extends DeesElement {
</div>
</dees-appui-maincontent>
`;
public static demoGroup = 'App UI';
// INSTANCE
@property({

View File

@@ -22,6 +22,7 @@ import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-appui-mainmenu')
export class DeesAppuiMainmenu extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'App UI';
// INSTANCE

View File

@@ -35,6 +35,7 @@ export class DeesAppuiProfileDropdown extends DeesElement {
.isOpen=${true}
></dees-appui-profiledropdown>
`;
public static demoGroup = 'App UI';
@property({ type: Object })
accessor user: {

View File

@@ -33,6 +33,7 @@ import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-appui-secondarymenu')
export class DeesAppuiSecondarymenu extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'App UI';
// INSTANCE

View File

@@ -18,6 +18,7 @@ import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-appui-tabs')
export class DeesAppuiTabs extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'App UI';
// INSTANCE
@property({

View File

@@ -39,6 +39,7 @@ declare global {
@customElement('dees-appui')
export class DeesAppui extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'App UI';
// ==========================================
// REACTIVE OBSERVABLES (RxJS Subjects)

View File

@@ -16,6 +16,7 @@ export class DeesButtonExit extends DeesElement {
public static demo = () => html`
<dees-button-exit></dees-button-exit>
`;
public static demoGroup = 'Button';
// INSTANCE
@property({

View File

@@ -21,6 +21,7 @@ declare global {
@customElement('dees-button-group')
export class DeesButtonGroup extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'Button';
@property()
accessor label: string = '';

View File

@@ -23,6 +23,7 @@ declare global {
@customElement('dees-button')
export class DeesButton extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'Button';
@property({
reflect: true,

View File

@@ -23,6 +23,7 @@ declare global {
@customElement('dees-chart-area')
export class DeesChartArea extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'Chart';
// instance
@state()

View File

@@ -29,6 +29,7 @@ export interface ILogEntry {
@customElement('dees-chart-log')
export class DeesChartLog extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'Chart';
@property()
accessor label: string = 'Server Logs';

View File

@@ -27,6 +27,7 @@ declare global {
@customElement('dees-dataview-codebox')
export class DeesDataviewCodebox extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'Data View';
@property()
accessor progLang: string = 'typescript';

View File

@@ -27,6 +27,7 @@ declare global {
@customElement('dees-dataview-statusobject')
export class DeesDataviewStatusobject extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'Data View';
@property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;

View File

@@ -19,6 +19,7 @@ declare global {
@customElement('dees-form-submit')
export class DeesFormSubmit extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'Form';
@property({
type: Boolean,

View File

@@ -65,6 +65,7 @@ declare global {
@customElement('dees-form')
export class DeesForm extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'Form';
public name: string = 'myform';
public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();

View File

@@ -21,6 +21,7 @@ declare global {
export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
// STATIC
public static demo = demoFunc;
public static demoGroup = 'Input';
// INSTANCE

View File

@@ -54,6 +54,7 @@ export class DeesInputCode extends DeesInputBase<string> {
.value=${'const greeting: string = "Hello World";\nconsole.log(greeting);'}
></dees-input-code>
`;
public static demoGroup = 'Input';
// INSTANCE
@property({ type: String })

View File

@@ -22,6 +22,7 @@ declare global {
@customElement('dees-input-datepicker')
export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
public static demo = demoFunc;
public static demoGroup = 'Input';
@property({ type: String })
accessor value: string = '';

View File

@@ -22,6 +22,7 @@ declare global {
@customElement('dees-input-dropdown')
export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
public static demo = demoFunc;
public static demoGroup = 'Input';
// INSTANCE

View File

@@ -21,6 +21,7 @@ declare global {
@customElement('dees-input-fileupload')
export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
public static demo = demoFunc;
public static demoGroup = 'Input';
@property({ attribute: false })
accessor value: File[] = [];

View File

@@ -17,6 +17,7 @@ import { themeDefaultStyles } from '../../00theme.js';
export class DeesInputIban extends DeesInputBase<DeesInputIban> {
// STATIC
public static demo = demoFunc;
public static demoGroup = 'Input';
// INSTANCE
@state()

View File

@@ -23,6 +23,7 @@ declare global {
export class DeesInputList extends DeesInputBase<DeesInputList> {
// STATIC
public static demo = demoFunc;
public static demoGroup = 'Input';
// INSTANCE
@property({ type: Array })

View File

@@ -22,6 +22,7 @@ declare global {
@customElement('dees-input-multitoggle')
export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
public static demo = demoFunc;
public static demoGroup = 'Input';
@property()

View File

@@ -22,6 +22,7 @@ declare global {
export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
// STATIC
public static demo = demoFunc;
public static demoGroup = 'Input';
// INSTANCE
@state()

View File

@@ -13,6 +13,7 @@ declare global {
@customElement('dees-input-quantityselector')
export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySelector> {
public static demo = demoFunc;
public static demoGroup = 'Input';
// INSTANCE

View File

@@ -21,6 +21,7 @@ type RadioOption = string | { option: string; key: string; payload?: any };
@customElement('dees-input-radiogroup')
export class DeesInputRadiogroup extends DeesInputBase<string | object> {
public static demo = demoFunc;
public static demoGroup = 'Input';
// INSTANCE

View File

@@ -28,6 +28,7 @@ declare global {
@customElement('dees-input-richtext')
export class DeesInputRichtext extends DeesInputBase<string> {
public static demo = demoFunc;
public static demoGroup = 'Input';
// INSTANCE
@property({

View File

@@ -22,6 +22,7 @@ declare global {
export class DeesInputTags extends DeesInputBase<DeesInputTags> {
// STATIC
public static demo = demoFunc;
public static demoGroup = 'Input';
// INSTANCE
@property({ type: Array })

View File

@@ -22,6 +22,7 @@ declare global {
@customElement('dees-input-text')
export class DeesInputText extends DeesInputBase {
public static demo = demoFunc;
public static demoGroup = 'Input';
// INSTANCE
@property({

View File

@@ -16,6 +16,7 @@ import { themeDefaultStyles } from '../../00theme.js';
@customElement('dees-input-typelist')
export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
public static demo = demoFunc;
public static demoGroup = 'Input';
// INSTANCE

View File

@@ -39,6 +39,7 @@ declare global {
@customElement('dees-input-wysiwyg')
export class DeesInputWysiwyg extends DeesInputBase<string> {
public static demo = demoFunc;
public static demoGroup = 'Input';
@property({ type: String })
accessor value: string = '';

View File

@@ -25,6 +25,7 @@ export type ProfileShape = 'square' | 'round';
@customElement('dees-input-profilepicture')
export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePicture> {
public static demo = demoFunc;
public static demoGroup = 'Input';
@property({ type: String })
accessor value: string = ''; // Base64 encoded image or URL

View File

@@ -15,6 +15,7 @@ declare global {
@customElement('dees-pdf-preview')
export class DeesPdfPreview extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'PDF';
public static styles = previewStyles;
@property({ type: String })

View File

@@ -1,6 +1,4 @@
import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
import { keyed } from 'lit/directives/keyed.js';
import { repeat } from 'lit/directives/repeat.js';
import { DeesElement, property, html, customElement, type TemplateResult, directives } from '@design.estate/dees-element';
import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
import { viewerStyles } from './styles.js';
import { demo as demoFunc } from './demo.js';
@@ -17,6 +15,7 @@ type RenderState = 'idle' | 'loading' | 'rendering-main' | 'rendering-thumbs' |
@customElement('dees-pdf-viewer')
export class DeesPdfViewer extends DeesElement {
public static demo = demoFunc;
public static demoGroup = 'PDF';
public static styles = viewerStyles;
@property({ type: String })
@@ -196,8 +195,8 @@ export class DeesPdfViewer extends DeesElement {
</button>
</div>
<div class="sidebar-content">
${keyed(this.documentId, html`
${repeat(
${directives.keyed(this.documentId, html`
${directives.repeat(
this.thumbnailData,
(item) => item.page,
(item) => html`
@@ -224,7 +223,7 @@ export class DeesPdfViewer extends DeesElement {
</div>
` : html`
<div class="pages-container">
${repeat(
${directives.repeat(
this.pageData,
(item) => item.page,
(item) => html`

View File

@@ -21,6 +21,7 @@ declare global {
export class DeesPdf extends DeesElement {
// DEMO
public static demo = () => html` <dees-pdf></dees-pdf> `;
public static demoGroup = 'PDF';
// INSTANCE

View File

@@ -33,6 +33,7 @@ export interface IView {
export class DeesSimpleAppDash extends DeesElement {
// STATIC
public static demo = demoFunc;
public static demoGroup = 'Simple';
// INSTANCE
@property()

View File

@@ -20,7 +20,8 @@ declare global {
@customElement('dees-simple-login')
export class DeesSimpleLogin extends DeesElement {
// STATIC
public static demo = demoFunc
public static demo = demoFunc;
public static demoGroup = 'Simple';
// INSTANCE
@property()

View File

@@ -31,6 +31,7 @@ export class DeesWorkspaceDiffEditor extends DeesElement {
.filePath=${'/demo/example.ts'}
></dees-workspace-diff-editor>
`;
public static demoGroup = 'Workspace';
// INSTANCE
public diffEditorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneDiffEditor>();

View File

@@ -37,6 +37,7 @@ export class DeesWorkspaceFiletree extends DeesElement {
<dees-workspace-filetree></dees-workspace-filetree>
</div>
`;
public static demoGroup = 'Workspace';
// INSTANCE
@property({ type: Object })

View File

@@ -23,6 +23,7 @@ declare global {
@customElement('dees-workspace-markdown')
export class DeesWorkspaceMarkdown extends DeesElement {
public static demo = () => html`<dees-workspace-markdown></dees-workspace-markdown>`;
public static demoGroup = 'Workspace';
public static styles = [
themeDefaultStyles,

View File

@@ -19,6 +19,7 @@ declare global {
export class DeesWorkspaceMarkdownoutlet extends DeesElement {
// DEMO
public static demo = demoFunc;
public static demoGroup = 'Workspace';
public static styles = [
themeDefaultStyles,

View File

@@ -23,6 +23,7 @@ declare global {
export class DeesWorkspaceMonaco extends DeesElement {
// DEMO
public static demo = () => html`<dees-workspace-monaco></dees-workspace-monaco>`;
public static demoGroup = 'Workspace';
// STATIC
public static monacoDeferred: ReturnType<typeof domtools.plugins.smartpromise.defer>;

View File

@@ -39,6 +39,7 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
]}
></dees-workspace-terminal-preview>
`;
public static demoGroup = 'Workspace';
/**
* The command being displayed (shown in header)

View File

@@ -37,6 +37,7 @@ export class DeesWorkspaceTerminal extends DeesElement {
const env = new WebContainerEnvironment();
return html`<dees-workspace-terminal .executionEnvironment=${env}></dees-workspace-terminal>`;
};
public static demoGroup = 'Workspace';
// INSTANCE
private resizeObserver: ResizeObserver;

View File

@@ -197,6 +197,7 @@ testSmartPromise();
</dees-demowrapper>
`;
};
public static demoGroup = 'Workspace';
// INSTANCE
@property({ type: Object })