feat(demo): add demoGroup metadata to components and update related dependencies
This commit is contained in:
@@ -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()
|
||||
|
||||
@@ -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 })
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -31,6 +31,7 @@ export class DeesAppuiMaincontent extends DeesElement {
|
||||
</div>
|
||||
</dees-appui-maincontent>
|
||||
`;
|
||||
public static demoGroup = 'App UI';
|
||||
|
||||
// INSTANCE
|
||||
@property({
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -35,6 +35,7 @@ export class DeesAppuiProfileDropdown extends DeesElement {
|
||||
.isOpen=${true}
|
||||
></dees-appui-profiledropdown>
|
||||
`;
|
||||
public static demoGroup = 'App UI';
|
||||
|
||||
@property({ type: Object })
|
||||
accessor user: {
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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 = '';
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -21,6 +21,7 @@ declare global {
|
||||
export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
|
||||
// STATIC
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
|
||||
|
||||
@@ -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 })
|
||||
|
||||
@@ -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 = '';
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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[] = [];
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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 })
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -22,6 +22,7 @@ declare global {
|
||||
export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
|
||||
// STATIC
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
@state()
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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 })
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 = '';
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 })
|
||||
|
||||
@@ -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`
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -33,6 +33,7 @@ export interface IView {
|
||||
export class DeesSimpleAppDash extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Simple';
|
||||
// INSTANCE
|
||||
|
||||
@property()
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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>();
|
||||
|
||||
@@ -37,6 +37,7 @@ export class DeesWorkspaceFiletree extends DeesElement {
|
||||
<dees-workspace-filetree></dees-workspace-filetree>
|
||||
</div>
|
||||
`;
|
||||
public static demoGroup = 'Workspace';
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: Object })
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -19,6 +19,7 @@ declare global {
|
||||
export class DeesWorkspaceMarkdownoutlet extends DeesElement {
|
||||
// DEMO
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Workspace';
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
|
||||
@@ -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>;
|
||||
|
||||
@@ -39,6 +39,7 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
|
||||
]}
|
||||
></dees-workspace-terminal-preview>
|
||||
`;
|
||||
public static demoGroup = 'Workspace';
|
||||
|
||||
/**
|
||||
* The command being displayed (shown in header)
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -197,6 +197,7 @@ testSmartPromise();
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
};
|
||||
public static demoGroup = 'Workspace';
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: Object })
|
||||
|
||||
Reference in New Issue
Block a user