feat(core): plugin defaults

site/src/playground.ts

@@ -14,4 +14,17 @@ 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
+  }
+});

site/views/examples/example/image.njk

@@ -1,7 +1,7 @@
 ---
 title: Example with image
 ---
-<uip-root editor-collapsed>
+<uip-root>
   <div class="uip-toolbar">
     <uip-snippets dropdown-view="all"></uip-snippets>
     <uip-theme-toggle></uip-theme-toggle>

site/views/index.njk

@@ -12,7 +12,7 @@ isLandingPage: true
         markup!</p>
     </div>
   </div>
-  <uip-root editor-collapsed>
+  <uip-root>
     <script type="text/html" uip-snippet label="Logo">
       <div class="logo-content gray-clr">
         <a class="get-started" href="{{ '/general/getting-started/' | url }}">
@@ -37,4 +37,3 @@ isLandingPage: true
     <uip-editor collapsible copy></uip-editor>
   </uip-root>
 </section>
-

src/config.ts

@@ -0,0 +1,28 @@
+export interface UIPDefaultConfigs {
+  editor: {
+    label?: string;
+    copy?: boolean;
+    collapsible?: boolean;
+    resizable?: boolean;
+  };
+
+  settings: {
+    dirToggle?: boolean;
+    themeToggle?: boolean;
+    collapsible?: boolean;
+    resizable?: boolean;
+    hideable?: boolean;
+  };
+}
+
+export class UIPDefaults {
+  protected static defaultConfigs: Partial<UIPDefaultConfigs> = {};
+
+  public static applyDefaults(config?: Partial<UIPDefaultConfigs>): void {
+    Object.assign(this.defaultConfigs, config);
+  }
+
+  public static for<T extends keyof UIPDefaultConfigs>(key: T): Partial<UIPDefaultConfigs[T]> {
+    return this.defaultConfigs[key] || {};
+  }
+}

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';
 
@@ -14,10 +15,12 @@ export abstract class UIPPluginPanel extends UIPPlugin {
   @boolAttr() 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;

src/plugins/editor/editor.tsx

@@ -8,8 +8,10 @@ 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 {UIPDefaults} from '../../config';
 import {UIPPluginPanel} from '../../core/panel/plugin-panel';
 import {CopyIcon} from '../copy/copy-button.icon';
 
@@ -32,8 +34,17 @@ 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 */
-  @boolAttr({name: 'copy'}) public showCopy: boolean;
+  @attr({parser: parseBoolean, serializer: toBooleanAttribute, name: 'copy', defaultValue: () => UIPDefaults.for('editor').copy})
+  public showCopy: boolean;
+
+  @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('editor').collapsible})
+  public collapsible: boolean;
+
+  @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('editor').resizable})
+  public resizable: boolean;
 
   protected override get $icon(): JSX.Element {
     return <EditorIcon/>;

src/plugins/settings/settings.tsx

@@ -2,8 +2,10 @@ 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 {UIPDefaults} from '../../config';
 import {ThemeToggleIcon} from '../theme/theme-toggle.icon';
 
 import {SettingsIcon} from './settings.icon';
@@ -21,8 +23,19 @@ 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, defaultValue: () => UIPDefaults.for('settings').dirToggle})
+  public dirToggle: boolean;
+  @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({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('settings').collapsible})
+  public collapsible: boolean;
+
+  @attr({parser: parseBoolean, serializer: toBooleanAttribute, defaultValue: () => UIPDefaults.for('settings').resizable})
+  public resizable: boolean;
 
   /** @readonly internal settings items state marker */
   @boolAttr({readonly: true}) public inactive: boolean;

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
+    }
+  });
 }

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<UIPDefaultConfigs>): void {
+  UIPDefaults.applyDefaults(config);
   registerCore();
   registerPlugins();
   registerSettings();