From 32f51d72b757cd90fd141d4e4b12249dfbd385c6 Mon Sep 17 00:00:00 2001 From: Feoktist Shovchko Date: Mon, 8 Jul 2024 13:37:35 +0300 Subject: [PATCH 1/6] feat(core): plugin defaults --- src/core/base/root.ts | 7 +++++-- src/core/panel/plugin-panel.tsx | 11 +++++++---- src/plugins/editor/editor.tsx | 6 ++++-- src/plugins/settings/select-setting/select-setting.ts | 6 ++++-- src/plugins/settings/settings.tsx | 7 +++++-- 5 files changed, 25 insertions(+), 12 deletions(-) diff --git a/src/core/base/root.ts b/src/core/base/root.ts index 1246374f..ba41d950 100644 --- a/src/core/base/root.ts +++ b/src/core/base/root.ts @@ -1,9 +1,11 @@ import {ESLBaseElement} from '@exadel/esl/modules/esl-base-element/core'; +import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format'; import { memoize, boolAttr, listen, - prop + prop, + attr } from '@exadel/esl/modules/esl-utils/decorators'; import {UIPStateModel} from './model'; @@ -34,7 +36,8 @@ export class UIPRoot extends ESLBaseElement { public static SNIPPET_SEL = '[uip-snippet]'; /** Indicates that the UIP components' theme is dark */ - @boolAttr() public darkTheme: boolean; + @attr({parser: parseBoolean, serializer: toBooleanAttribute}) + public darkTheme: boolean; /** Indicates ready state of the uip-root */ @boolAttr({readonly: true}) public ready: boolean; diff --git a/src/core/panel/plugin-panel.tsx b/src/core/panel/plugin-panel.tsx index 113da870..03e54d28 100644 --- a/src/core/panel/plugin-panel.tsx +++ b/src/core/panel/plugin-panel.tsx @@ -4,6 +4,7 @@ import {CSSClassUtils} from '@exadel/esl/modules/esl-utils/dom'; import {skipOneRender} from '@exadel/esl/modules/esl-utils/async'; import {ESLMediaQuery} from '@exadel/esl/modules/esl-media-query/core'; import {attr, boolAttr, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators'; +import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format'; import {UIPPlugin} from '../base/plugin'; @@ -11,16 +12,18 @@ export abstract class UIPPluginPanel extends UIPPlugin { public static readonly observedAttributes: string[] = ['vertical', 'collapsible', ...UIPPlugin.observedAttributes]; /** Marker to collapse editor area */ - @boolAttr() public collapsed: boolean; + @attr({parser: parseBoolean}) public collapsed: boolean; /** Marker to make enable toggle collapse action for section header */ - @boolAttr() public collapsible: boolean; + @attr({parser: parseBoolean, serializer: toBooleanAttribute}) + public collapsible: boolean; /** Marker that indicates resizable state of the panel */ - @boolAttr() public resizable: boolean; + @attr({parser: parseBoolean, serializer: toBooleanAttribute}) + public resizable: boolean; /** Marker that indicates resizing state of the panel */ - @boolAttr() public resizing: boolean; + @attr({parser: parseBoolean}) public resizing: boolean; /** Marker to make plugin panel vertical */ @attr({defaultValue: 'not all'}) public vertical: string; diff --git a/src/plugins/editor/editor.tsx b/src/plugins/editor/editor.tsx index 49e19396..a82d3744 100644 --- a/src/plugins/editor/editor.tsx +++ b/src/plugins/editor/editor.tsx @@ -8,7 +8,8 @@ import Prism from 'prismjs'; import {CodeJar} from 'codejar'; import {debounce} from '@exadel/esl/modules/esl-utils/async/debounce'; -import {attr, boolAttr, decorate, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators'; +import {attr, decorate, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators'; +import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format'; import {UIPPluginPanel} from '../../core/panel/plugin-panel'; import {CopyIcon} from '../copy/copy-button.icon'; @@ -33,7 +34,8 @@ export class UIPEditor extends UIPPluginPanel { @attr({defaultValue: 'html'}) public source: 'js' | 'javascript' | 'html'; /** Marker to display copy widget */ - @boolAttr({name: 'copy'}) public showCopy: boolean; + @attr({parser: parseBoolean, serializer: toBooleanAttribute, name: 'copy'}) + public showCopy: boolean; protected override get $icon(): JSX.Element { return ; diff --git a/src/plugins/settings/select-setting/select-setting.ts b/src/plugins/settings/select-setting/select-setting.ts index 6baf3db8..82312faa 100644 --- a/src/plugins/settings/select-setting/select-setting.ts +++ b/src/plugins/settings/select-setting/select-setting.ts @@ -1,5 +1,6 @@ import {randUID} from '@exadel/esl/modules/esl-utils/misc/uid'; -import {attr, boolAttr, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators'; +import {attr, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators'; +import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format'; import {TokenListUtils} from '../../../core/utils/token-list'; import {UIPSetting} from '../base-setting/base-setting'; @@ -27,7 +28,8 @@ export class UIPSelectSetting extends UIPSetting { */ @attr({defaultValue: 'replace'}) public mode: 'replace' | 'append'; /** Indicates whether setting supports multiple values selected or not */ - @boolAttr() public multiple: boolean; + @attr({parser: parseBoolean, serializer: toBooleanAttribute}) + public multiple: boolean; /** Select field to change setting's value */ @memoize() protected get $field(): ESLSelect { diff --git a/src/plugins/settings/settings.tsx b/src/plugins/settings/settings.tsx index 8e80691b..dc22cb99 100644 --- a/src/plugins/settings/settings.tsx +++ b/src/plugins/settings/settings.tsx @@ -2,6 +2,7 @@ import React from 'jsx-dom'; import {debounce} from '@exadel/esl/modules/esl-utils/async/debounce'; import {attr, boolAttr, decorate, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators'; +import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format'; import {UIPPluginPanel} from '../../core/panel/plugin-panel'; import {ThemeToggleIcon} from '../theme/theme-toggle.icon'; @@ -21,8 +22,10 @@ export class UIPSettings extends UIPPluginPanel { /** Attribute to set all inner {@link UIPSetting} settings' {@link UIPSetting#target} targets */ @attr() public target: string; - @boolAttr() public dirToggle: boolean; - @boolAttr() public themeToggle: boolean; + @attr({parser: parseBoolean, serializer: toBooleanAttribute}) + public dirToggle: boolean; + @attr({parser: parseBoolean, serializer: toBooleanAttribute}) + public themeToggle: boolean; /** @readonly internal settings items state marker */ @boolAttr({readonly: true}) public inactive: boolean; From ab4fa87e3a077092db641c0f5699a315bdf1b7ec Mon Sep 17 00:00:00 2001 From: Feoktist Shovchko Date: Tue, 30 Jul 2024 15:37:10 +0300 Subject: [PATCH 2/6] chore(core): rework defaults --- site/src/playground.ts | 18 +++++++++- site/views/examples/example/image.njk | 2 +- site/views/index.njk | 6 ++-- src/config.ts | 36 +++++++++++++++++++ src/core/base/root.ts | 3 +- src/core/panel/plugin-panel.tsx | 4 +-- src/core/preview/preview.tsx | 3 ++ src/plugins/editor/editor.tsx | 12 ++++++- .../settings/select-setting/select-setting.ts | 6 ++-- src/plugins/settings/settings.tsx | 14 ++++++-- src/registration.all.ts | 12 ++++++- src/registration.ts | 7 +++- 12 files changed, 106 insertions(+), 17 deletions(-) create mode 100644 src/config.ts diff --git a/site/src/playground.ts b/site/src/playground.ts index 7d146577..29aea1f5 100644 --- a/site/src/playground.ts +++ b/site/src/playground.ts @@ -14,4 +14,20 @@ ESLAlert.register(); ESLAlert.init(); import {init} from '@exadel/ui-playground/esm/registration.js'; -init(); +init({ + editor: { + label: 'Source code', + copy: true, + collapsible: true, + }, + settings: { + dirToggle: true, + themeToggle: true, + collapsible: true, + hideable: true, + resizable: true + }, + preview: { + resizable: true + } +}); diff --git a/site/views/examples/example/image.njk b/site/views/examples/example/image.njk index 389bda52..22b467b9 100644 --- a/site/views/examples/example/image.njk +++ b/site/views/examples/example/image.njk @@ -1,7 +1,7 @@ --- title: Example with image --- - +
diff --git a/site/views/index.njk b/site/views/index.njk index ef3d7f2e..d85946cb 100644 --- a/site/views/index.njk +++ b/site/views/index.njk @@ -12,7 +12,7 @@ isLandingPage: true markup!

- + - + @@ -34,7 +34,7 @@ isLandingPage: true - + diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 00000000..cdf15680 --- /dev/null +++ b/src/config.ts @@ -0,0 +1,36 @@ +export interface UIPDefaultConfigs { + root: { + darkTheme?: boolean; + }; + + editor: { + label?: string; + copy?: boolean; + collapsible?: boolean; + resizable?: boolean; + }; + + settings: { + dirToggle?: boolean; + themeToggle?: boolean; + collapsible?: boolean; + resizable?: boolean; + hideable?: boolean; + }; + + preview: { + resizable?: boolean; + }; +} + +export class UIPDefaults { + protected static defaultConfigs: Partial = {}; + + public static applyDefaults(config?: Partial): void { + Object.assign(this.defaultConfigs, config); + } + + public static for(key: T): Partial { + return this.defaultConfigs[key] || {}; + } +} diff --git a/src/core/base/root.ts b/src/core/base/root.ts index ba41d950..c58f0b8d 100644 --- a/src/core/base/root.ts +++ b/src/core/base/root.ts @@ -8,6 +8,7 @@ import { attr } from '@exadel/esl/modules/esl-utils/decorators'; +import {UIPDefaults} from '../../config'; import {UIPStateModel} from './model'; import type {UIPSnippetTemplate} from './snippet'; @@ -36,7 +37,7 @@ export class UIPRoot extends ESLBaseElement { public static SNIPPET_SEL = '[uip-snippet]'; /** Indicates that the UIP components' theme is dark */ - @attr({parser: parseBoolean, serializer: toBooleanAttribute}) + @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('root').darkTheme}) public darkTheme: boolean; /** Indicates ready state of the uip-root */ diff --git a/src/core/panel/plugin-panel.tsx b/src/core/panel/plugin-panel.tsx index 03e54d28..2a78ef58 100644 --- a/src/core/panel/plugin-panel.tsx +++ b/src/core/panel/plugin-panel.tsx @@ -12,7 +12,7 @@ export abstract class UIPPluginPanel extends UIPPlugin { public static readonly observedAttributes: string[] = ['vertical', 'collapsible', ...UIPPlugin.observedAttributes]; /** Marker to collapse editor area */ - @attr({parser: parseBoolean}) public collapsed: boolean; + @boolAttr() public collapsed: boolean; /** Marker to make enable toggle collapse action for section header */ @attr({parser: parseBoolean, serializer: toBooleanAttribute}) @@ -23,7 +23,7 @@ export abstract class UIPPluginPanel extends UIPPlugin { public resizable: boolean; /** Marker that indicates resizing state of the panel */ - @attr({parser: parseBoolean}) public resizing: boolean; + @boolAttr() public resizing: boolean; /** Marker to make plugin panel vertical */ @attr({defaultValue: 'not all'}) public vertical: string; diff --git a/src/core/preview/preview.tsx b/src/core/preview/preview.tsx index deb3542b..68cb720b 100644 --- a/src/core/preview/preview.tsx +++ b/src/core/preview/preview.tsx @@ -6,6 +6,7 @@ import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/mi import {promisifyEvent, promisifyNextRender, promisifyTimeout} from '@exadel/esl/modules/esl-utils/async'; import {UIPPlugin} from '../base/plugin'; +import {UIPDefaults} from '../../config'; import {UIPRenderingTemplatesService} from '../processors/templates'; import {UIPJSRenderingPreprocessors, UIPHTMLRenderingPreprocessors} from '../processors/rendering'; @@ -29,6 +30,8 @@ export class UIPPreview extends UIPPlugin { /** Delay to show new content after isolated full refresh */ @attr({defaultValue: 150, parser: parseInt}) public refreshDelay: number; + @attr({inherit: true, defaultValue: () => UIPDefaults.for('preview').resizable}) public resizable: boolean; + protected _iframeResizeRAF: number = 0; /** {@link UIPPlugin} section wrapper */ diff --git a/src/plugins/editor/editor.tsx b/src/plugins/editor/editor.tsx index a82d3744..4360b10a 100644 --- a/src/plugins/editor/editor.tsx +++ b/src/plugins/editor/editor.tsx @@ -11,6 +11,7 @@ import {debounce} from '@exadel/esl/modules/esl-utils/async/debounce'; import {attr, decorate, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators'; import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format'; +import {UIPDefaults} from '../../config'; import {UIPPluginPanel} from '../../core/panel/plugin-panel'; import {CopyIcon} from '../copy/copy-button.icon'; @@ -34,9 +35,18 @@ export class UIPEditor extends UIPPluginPanel { @attr({defaultValue: 'html'}) public source: 'js' | 'javascript' | 'html'; /** Marker to display copy widget */ - @attr({parser: parseBoolean, serializer: toBooleanAttribute, name: 'copy'}) + @attr({parser: parseBoolean, serializer: toBooleanAttribute, name: 'copy', defaultValue: () => UIPDefaults.for('editor').copy}) public showCopy: boolean; + @attr({inherit: true, defaultValue: () => UIPDefaults.for('editor').collapsible}) + public collapsible: boolean; + + @attr({inherit: true, defaultValue: () => UIPDefaults.for('editor').resizable}) + public resizable: boolean; + + @attr({inherit: true, defaultValue: () => UIPDefaults.for('editor').label}) + public label: string; + protected override get $icon(): JSX.Element { return ; } diff --git a/src/plugins/settings/select-setting/select-setting.ts b/src/plugins/settings/select-setting/select-setting.ts index 82312faa..6baf3db8 100644 --- a/src/plugins/settings/select-setting/select-setting.ts +++ b/src/plugins/settings/select-setting/select-setting.ts @@ -1,6 +1,5 @@ import {randUID} from '@exadel/esl/modules/esl-utils/misc/uid'; -import {attr, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators'; -import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format'; +import {attr, boolAttr, listen, memoize} from '@exadel/esl/modules/esl-utils/decorators'; import {TokenListUtils} from '../../../core/utils/token-list'; import {UIPSetting} from '../base-setting/base-setting'; @@ -28,8 +27,7 @@ export class UIPSelectSetting extends UIPSetting { */ @attr({defaultValue: 'replace'}) public mode: 'replace' | 'append'; /** Indicates whether setting supports multiple values selected or not */ - @attr({parser: parseBoolean, serializer: toBooleanAttribute}) - public multiple: boolean; + @boolAttr() public multiple: boolean; /** Select field to change setting's value */ @memoize() protected get $field(): ESLSelect { diff --git a/src/plugins/settings/settings.tsx b/src/plugins/settings/settings.tsx index dc22cb99..da150531 100644 --- a/src/plugins/settings/settings.tsx +++ b/src/plugins/settings/settings.tsx @@ -5,6 +5,7 @@ import {attr, boolAttr, decorate, listen, memoize} from '@exadel/esl/modules/esl import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format'; import {UIPPluginPanel} from '../../core/panel/plugin-panel'; +import {UIPDefaults} from '../../config'; import {ThemeToggleIcon} from '../theme/theme-toggle.icon'; import {SettingsIcon} from './settings.icon'; @@ -22,11 +23,20 @@ export class UIPSettings extends UIPPluginPanel { /** Attribute to set all inner {@link UIPSetting} settings' {@link UIPSetting#target} targets */ @attr() public target: string; - @attr({parser: parseBoolean, serializer: toBooleanAttribute}) + @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('settings').dirToggle}) public dirToggle: boolean; - @attr({parser: parseBoolean, serializer: toBooleanAttribute}) + @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('settings').themeToggle}) public themeToggle: boolean; + @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('settings').hideable}) + public hideable: boolean; + + @attr({inherit: true, defaultValue: () => UIPDefaults.for('settings').collapsible}) + public collapsible: boolean; + + @attr({inherit: true, defaultValue: () => UIPDefaults.for('settings').resizable}) + public resizable: boolean; + /** @readonly internal settings items state marker */ @boolAttr({readonly: true}) public inactive: boolean; diff --git a/src/registration.all.ts b/src/registration.all.ts index 0582a961..7d5ee8c1 100644 --- a/src/registration.all.ts +++ b/src/registration.all.ts @@ -13,5 +13,15 @@ export function initWithESL(): void { ESLToggleable.register(); ESLScrollbar.register(); - init(); + init({ + editor: { + label: 'Source code', + copy: true, + collapsible: true + }, + settings: { + resizable: true, + hideable: true + } + }); } diff --git a/src/registration.ts b/src/registration.ts index eef75e14..dec02f64 100644 --- a/src/registration.ts +++ b/src/registration.ts @@ -1,10 +1,15 @@ + +import {UIPDefaults} from './config'; import {registerCore} from './core/registration'; import {registerPlugins, registerSettings} from './plugins/registration'; +import type {UIPDefaultConfigs} from './config'; + export * from './core/registration'; export * from './plugins/registration'; -export function init(): void { +export function init(config?: Partial): void { + UIPDefaults.applyDefaults(config); registerCore(); registerPlugins(); registerSettings(); From 7c3e36d66f712d9f05a796bd5e56efc982657513 Mon Sep 17 00:00:00 2001 From: Feoktist Shovchko Date: Tue, 30 Jul 2024 21:32:21 +0300 Subject: [PATCH 3/6] chore(core): code refactoring --- site/src/playground.ts | 3 --- site/views/index.njk | 5 ++--- src/config.ts | 4 ---- src/core/preview/preview.tsx | 2 -- src/plugins/editor/editor.tsx | 6 +++--- src/plugins/settings/settings.tsx | 5 +++-- 6 files changed, 8 insertions(+), 17 deletions(-) diff --git a/site/src/playground.ts b/site/src/playground.ts index 29aea1f5..d5e7986c 100644 --- a/site/src/playground.ts +++ b/site/src/playground.ts @@ -26,8 +26,5 @@ init({ collapsible: true, hideable: true, resizable: true - }, - preview: { - resizable: true } }); diff --git a/site/views/index.njk b/site/views/index.njk index d85946cb..a09d8f3f 100644 --- a/site/views/index.njk +++ b/site/views/index.njk @@ -25,7 +25,7 @@ isLandingPage: true - + @@ -34,7 +34,6 @@ isLandingPage: true - + - diff --git a/src/config.ts b/src/config.ts index cdf15680..626905d5 100644 --- a/src/config.ts +++ b/src/config.ts @@ -17,10 +17,6 @@ export interface UIPDefaultConfigs { resizable?: boolean; hideable?: boolean; }; - - preview: { - resizable?: boolean; - }; } export class UIPDefaults { diff --git a/src/core/preview/preview.tsx b/src/core/preview/preview.tsx index 68cb720b..b94b0256 100644 --- a/src/core/preview/preview.tsx +++ b/src/core/preview/preview.tsx @@ -30,8 +30,6 @@ export class UIPPreview extends UIPPlugin { /** Delay to show new content after isolated full refresh */ @attr({defaultValue: 150, parser: parseInt}) public refreshDelay: number; - @attr({inherit: true, defaultValue: () => UIPDefaults.for('preview').resizable}) public resizable: boolean; - protected _iframeResizeRAF: number = 0; /** {@link UIPPlugin} section wrapper */ diff --git a/src/plugins/editor/editor.tsx b/src/plugins/editor/editor.tsx index 4360b10a..8e7ea1f3 100644 --- a/src/plugins/editor/editor.tsx +++ b/src/plugins/editor/editor.tsx @@ -38,13 +38,13 @@ export class UIPEditor extends UIPPluginPanel { @attr({parser: parseBoolean, serializer: toBooleanAttribute, name: 'copy', defaultValue: () => UIPDefaults.for('editor').copy}) public showCopy: boolean; - @attr({inherit: true, defaultValue: () => UIPDefaults.for('editor').collapsible}) + @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('editor').collapsible}) public collapsible: boolean; - @attr({inherit: true, defaultValue: () => UIPDefaults.for('editor').resizable}) + @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('editor').resizable}) public resizable: boolean; - @attr({inherit: true, defaultValue: () => UIPDefaults.for('editor').label}) + @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('editor').label}) public label: string; protected override get $icon(): JSX.Element { diff --git a/src/plugins/settings/settings.tsx b/src/plugins/settings/settings.tsx index da150531..3976cf65 100644 --- a/src/plugins/settings/settings.tsx +++ b/src/plugins/settings/settings.tsx @@ -31,10 +31,10 @@ export class UIPSettings extends UIPPluginPanel { @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('settings').hideable}) public hideable: boolean; - @attr({inherit: true, defaultValue: () => UIPDefaults.for('settings').collapsible}) + @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('settings').collapsible}) public collapsible: boolean; - @attr({inherit: true, defaultValue: () => UIPDefaults.for('settings').resizable}) + @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('settings').resizable}) public resizable: boolean; /** @readonly internal settings items state marker */ @@ -80,6 +80,7 @@ export class UIPSettings extends UIPPluginPanel { } protected override connectedCallback(): void { + console.log(this.resizable, this.collapsible, this.hideable); super.connectedCallback(); this.appendChild(this.$header); this.appendChild(this.$inner); From 3ee9cfb35594e0dfba2a7b435bce79e7f11d9005 Mon Sep 17 00:00:00 2001 From: Feoktist Shovchko Date: Tue, 30 Jul 2024 21:34:29 +0300 Subject: [PATCH 4/6] chore(core): code refactoring --- src/core/preview/preview.tsx | 1 - src/plugins/settings/settings.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/core/preview/preview.tsx b/src/core/preview/preview.tsx index b94b0256..deb3542b 100644 --- a/src/core/preview/preview.tsx +++ b/src/core/preview/preview.tsx @@ -6,7 +6,6 @@ import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/mi import {promisifyEvent, promisifyNextRender, promisifyTimeout} from '@exadel/esl/modules/esl-utils/async'; import {UIPPlugin} from '../base/plugin'; -import {UIPDefaults} from '../../config'; import {UIPRenderingTemplatesService} from '../processors/templates'; import {UIPJSRenderingPreprocessors, UIPHTMLRenderingPreprocessors} from '../processors/rendering'; diff --git a/src/plugins/settings/settings.tsx b/src/plugins/settings/settings.tsx index 3976cf65..dc345844 100644 --- a/src/plugins/settings/settings.tsx +++ b/src/plugins/settings/settings.tsx @@ -80,7 +80,6 @@ export class UIPSettings extends UIPPluginPanel { } protected override connectedCallback(): void { - console.log(this.resizable, this.collapsible, this.hideable); super.connectedCallback(); this.appendChild(this.$header); this.appendChild(this.$inner); From ac2275a372c3d519da47edc7df2e479e0b70bc34 Mon Sep 17 00:00:00 2001 From: Feoktist Shovchko Date: Tue, 30 Jul 2024 21:37:58 +0300 Subject: [PATCH 5/6] chore(core): code refactoring --- src/config.ts | 4 ---- src/core/base/root.ts | 8 ++------ 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/src/config.ts b/src/config.ts index 626905d5..06a8502d 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,8 +1,4 @@ export interface UIPDefaultConfigs { - root: { - darkTheme?: boolean; - }; - editor: { label?: string; copy?: boolean; diff --git a/src/core/base/root.ts b/src/core/base/root.ts index c58f0b8d..1246374f 100644 --- a/src/core/base/root.ts +++ b/src/core/base/root.ts @@ -1,14 +1,11 @@ import {ESLBaseElement} from '@exadel/esl/modules/esl-base-element/core'; -import {parseBoolean, toBooleanAttribute} from '@exadel/esl/modules/esl-utils/misc/format'; import { memoize, boolAttr, listen, - prop, - attr + prop } from '@exadel/esl/modules/esl-utils/decorators'; -import {UIPDefaults} from '../../config'; import {UIPStateModel} from './model'; import type {UIPSnippetTemplate} from './snippet'; @@ -37,8 +34,7 @@ export class UIPRoot extends ESLBaseElement { public static SNIPPET_SEL = '[uip-snippet]'; /** Indicates that the UIP components' theme is dark */ - @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('root').darkTheme}) - public darkTheme: boolean; + @boolAttr() public darkTheme: boolean; /** Indicates ready state of the uip-root */ @boolAttr({readonly: true}) public ready: boolean; From 3cb60408fcf356ec7618b2d2ed4c586ebd595c09 Mon Sep 17 00:00:00 2001 From: Feoktist Shovchko Date: Tue, 30 Jul 2024 21:43:17 +0300 Subject: [PATCH 6/6] chore(core): code refactoring --- src/plugins/editor/editor.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/plugins/editor/editor.tsx b/src/plugins/editor/editor.tsx index 8e7ea1f3..63bb2b3d 100644 --- a/src/plugins/editor/editor.tsx +++ b/src/plugins/editor/editor.tsx @@ -34,6 +34,8 @@ export class UIPEditor extends UIPPluginPanel { /** Source for Editor plugin (default: 'html') */ @attr({defaultValue: 'html'}) public source: 'js' | 'javascript' | 'html'; + @attr({defaultValue: () => UIPDefaults.for('editor').label}) public label: string; + /** Marker to display copy widget */ @attr({parser: parseBoolean, serializer: toBooleanAttribute, name: 'copy', defaultValue: () => UIPDefaults.for('editor').copy}) public showCopy: boolean; @@ -44,9 +46,6 @@ export class UIPEditor extends UIPPluginPanel { @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('editor').resizable}) public resizable: boolean; - @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('editor').label}) - public label: string; - protected override get $icon(): JSX.Element { return ; }