@aquera/nile-elements 0.0.101 → 0.0.102

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.101",
+  "version": "0.0.102",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-code-editor/nile-code-editor.ts

@@ -108,46 +108,12 @@ export class NileCodeEditor extends NileElement {
   }
 
   firstUpdated() {
-    const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());
-    const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
-    const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension())
-    const customAutoCompletions = this.customCompletionComp.of(javascriptLanguage.data.of({
-      autocomplete: scopeCompletionSource(this.customAutoCompletions),
-    }));
-    const language = this.language == "sql" ? sql() : javascript()
-    let startState = EditorState.create({
-      doc: !this.multiline ? this.convertToSingleLine(this.value) : this.value,
-      extensions: [
-        basicSetup({
-          lineNumbers: this.lineNumbers || this.multiline,
-          highlightActiveLine: false,
-          foldGutter: false,
-        }),
-        lineNumbersExtension,
-        readOnlyExtension,
-        restrictSingleLineExtension,
-        customAutoCompletions,
-        autocompletion(),
-        language,
-        EditorView.theme(Theme),
-        EditorView.updateListener.of((v: ViewUpdate) => {
-          if (v.docChanged) {
-            this.emit('nile-change', { value: this.view.state.doc.toString() })
-          }
-        }),
-        EditorView.domEventHandlers({
-          focus: () => this.dispatchEvent(new Event('nile-focus')),
-          blur: () => this.dispatchEvent(new Event('nile-blur')),
-        }),
-      ],
-    });
-
-    this.view = new EditorView({
-      state: startState,
-      parent: this.codeEditor
-    });
-
-    this.emit('nile-after-init',{ codeMirrorInstance: this.view, insertAtCursor: this.insertBetweenCode } )
+    this.createNewView()
+    this.emit('nile-after-init',{ 
+      codeMirrorInstance: this.view, 
+      createNewView: this.createNewView, 
+      insertAtCursor: this.insertBetweenCode 
+    }, false )
   }
 
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{
@@ -225,6 +191,50 @@ export class NileCodeEditor extends NileElement {
         : ``}`;
   }
 
+  createNewView(){
+    if(this.view) this.view.destroy();
+    const lineNumbersExtension = this.lineNumbersComp.of(this.getLineNumbersExension());
+    const readOnlyExtension = this.readOnlyComp.of(this.getReadOnlyExtension());
+    const restrictSingleLineExtension = this.restrictSingleLineComp.of(this.getSingleLineExtension())
+    const customAutoCompletions = this.customCompletionComp.of(javascriptLanguage.data.of({
+      autocomplete: scopeCompletionSource(this.customAutoCompletions),
+    }));
+    const language = this.language == "sql" ? sql() : javascript()
+    let startState = EditorState.create({
+      doc: !this.multiline ? this.convertToSingleLine(this.value) : this.value,
+      extensions: [
+        basicSetup({
+          lineNumbers: this.lineNumbers || this.multiline,
+          highlightActiveLine: false,
+          foldGutter: false,
+        }),
+        lineNumbersExtension,
+        readOnlyExtension,
+        restrictSingleLineExtension,
+        customAutoCompletions,
+        autocompletion(),
+        language,
+        EditorView.theme(Theme),
+        EditorView.updateListener.of((v: ViewUpdate) => {
+          if (v.docChanged) {
+            this.emit('nile-change', { value: this.view.state.doc.toString() })
+          }
+        }),
+        EditorView.domEventHandlers({
+          focus: () => this.dispatchEvent(new Event('nile-focus')),
+          blur: () => this.dispatchEvent(new Event('nile-blur')),
+        }),
+      ],
+    });
+
+    this.view = new EditorView({
+      state: startState,
+      parent: this.codeEditor
+    });
+
+    this.emit('nile-after-update',{ codeMirrorInstance: this.view }, false )
+  }
+
   singleLineMultiLineToggle() {
     this.view.dispatch({
       changes: {
@@ -274,6 +284,7 @@ export class NileCodeEditor extends NileElement {
 
   emitNileExpand() {
     this.emit('nile-expand', { expand: true });
+    this.createNewView()
   }
 
   /* #endregion */

package/src/nile-tab/nile-tab.ts

@@ -14,7 +14,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { query } from 'lit/decorators.js';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValueMap } from 'lit';
 
 let id = 0;
 
@@ -69,6 +69,7 @@ export class NileTab extends NileElement {
 
   @watch('active')
   handleActiveChange() {
+    if(this.active) this.emit('nile-toggle-change',{ value: this.panel })
     this.setAttribute('aria-selected', this.active ? 'true' : 'false');
   }
 

package/src/nile-tab-group/nile-tab-group.ts

@@ -135,6 +135,10 @@ export class NileTabGroup extends NileElement {
     this.mutationObserver.disconnect();
     this.resizeObserver.unobserve(this.nav);
   }
+ 
+  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+    this.addEventListener('nile-toggle-change', this.handleToggleFromTab);
+  }
 
   protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     if(_changedProperties.has('activeTabName')){
@@ -144,6 +148,96 @@ export class NileTabGroup extends NileElement {
     }
   }
 
+  @watch('noScrollControls', { waitUntilFirstUpdate: true })
+  updateScrollControls() {
+    if (this.noScrollControls) {
+      this.hasScrollControls = false;
+    } else {
+      this.hasScrollControls =
+        ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
+      this.hasScrollControls = false;
+    }
+  }
+
+  @watch('placement', { waitUntilFirstUpdate: true })
+  syncIndicator() {
+    if(!this.indicator) return;
+    const tab = this.getActiveTab();
+
+    if (tab) {
+      this.indicator.style.display = 'block';
+      this.repositionIndicator();
+    } else {
+      this.indicator.style.display = 'none';
+    }
+  }
+  
+  render() {
+    const isRtl = true;
+
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          'tab-group': true,
+          'tab-group--top': this.placement === 'top',
+          'tab-group--bottom': this.placement === 'bottom',
+          'tab-group--start': this.placement === 'start',
+          'tab-group--end': this.placement === 'end',
+          'tab-group--rtl': true,
+          'tab-group--has-scroll-controls': this.hasScrollControls,
+          'hide__track':this.noTrack
+        })}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <div class="tab-group__nav-container" part="nav">
+          ${this.hasScrollControls
+            ? html`
+                <nile-icon-button
+                  part="scroll-button scroll-button--start"
+                  exportparts="base:scroll-button__base"
+                  class="tab-group__scroll-button tab-group__scroll-button--start"
+                  name='arrowright'
+                  library="system"
+                  label="scrollToStart"
+                  @click=${this.handleScrollToStart}
+                ></nile-icon-button>
+              `
+            : ''}
+
+          <div class="tab-group__nav">
+            <div part="tabs" class="tab-group__tabs" role="tablist">
+              <div
+                part="active-tab-indicator"
+                class=${classMap({
+                  'tab-group__indicator': !this.noTrack,
+                })}
+              ></div>
+              <slot name="nav"  @slotchange=${this.syncTabsAndPanels}></slot>
+            </div>
+          </div>
+
+          ${this.hasScrollControls
+            ? html`
+                <nile-icon-button
+                  part="scroll-button scroll-button--end"
+                  exportparts="base:scroll-button__base"
+                  class="tab-group__scroll-button tab-group__scroll-button--end"
+                  name='arrowleft'
+                  library="system"
+                  label="scrollToEnd"
+                  @click=${this.handleScrollToEnd}
+                ></nile-icon-button>
+              `
+            : ''}
+        </div>
+
+        <slot part="body" class="tab-group__body" @slotchange=${this.syncTabsAndPanels}></slot>
+      </div>
+    `;
+  }
+
   private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {
     const slot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="nav"]')!;
 
@@ -358,105 +452,12 @@ export class NileTabGroup extends NileElement {
     // After updating, show or hide scroll controls as needed
     this.updateComplete.then(() => this.updateScrollControls());
   }
-
-  @watch('noScrollControls', { waitUntilFirstUpdate: true })
-  updateScrollControls() {
-    if (this.noScrollControls) {
-      this.hasScrollControls = false;
-    } else {
-      this.hasScrollControls =
-        ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
-      this.hasScrollControls = false;
-    }
-  }
-
-  @watch('placement', { waitUntilFirstUpdate: true })
-  syncIndicator() {
-    if(!this.indicator) return;
-    const tab = this.getActiveTab();
-
-    if (tab) {
-      this.indicator.style.display = 'block';
-      this.repositionIndicator();
-    } else {
-      this.indicator.style.display = 'none';
-    }
-  }
-
-  /** Shows the specified tab panel. */
-  show(panel: string) {
-    const tab = this.tabs.find(el => el.panel === panel);
-
-    if (tab) {
-      this.activeTabName=tab.panel;
-    }
+  
+  private handleToggleFromTab(e:CustomEvent){
+    e.stopPropagation();
+    this.activeTabName=e.detail.value;
   }
 
-  render() {
-    const isRtl = true;
-
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          'tab-group': true,
-          'tab-group--top': this.placement === 'top',
-          'tab-group--bottom': this.placement === 'bottom',
-          'tab-group--start': this.placement === 'start',
-          'tab-group--end': this.placement === 'end',
-          'tab-group--rtl': true,
-          'tab-group--has-scroll-controls': this.hasScrollControls,
-          'hide__track':this.noTrack
-        })}
-        @click=${this.handleClick}
-        @keydown=${this.handleKeyDown}
-      >
-        <div class="tab-group__nav-container" part="nav">
-          ${this.hasScrollControls
-            ? html`
-                <nile-icon-button
-                  part="scroll-button scroll-button--start"
-                  exportparts="base:scroll-button__base"
-                  class="tab-group__scroll-button tab-group__scroll-button--start"
-                  name='arrowright'
-                  library="system"
-                  label="scrollToStart"
-                  @click=${this.handleScrollToStart}
-                ></nile-icon-button>
-              `
-            : ''}
-
-          <div class="tab-group__nav">
-            <div part="tabs" class="tab-group__tabs" role="tablist">
-              <div
-                part="active-tab-indicator"
-                class=${classMap({
-                  'tab-group__indicator': !this.noTrack,
-                })}
-              ></div>
-              <slot name="nav"  @slotchange=${this.syncTabsAndPanels}></slot>
-            </div>
-          </div>
-
-          ${this.hasScrollControls
-            ? html`
-                <nile-icon-button
-                  part="scroll-button scroll-button--end"
-                  exportparts="base:scroll-button__base"
-                  class="tab-group__scroll-button tab-group__scroll-button--end"
-                  name='arrowleft'
-                  library="system"
-                  label="scrollToEnd"
-                  @click=${this.handleScrollToEnd}
-                ></nile-icon-button>
-              `
-            : ''}
-        </div>
-
-        <slot part="body" class="tab-group__body" @slotchange=${this.syncTabsAndPanels}></slot>
-      </div>
-    `;
-  }
 }
 
 export default NileTabGroup;