@kubex/zinc 1.0.20 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/inline-edit/inline-edit.component.ts

@@ -156,6 +156,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   submitKeyHandler = (e: KeyboardEvent) => {
     if (e.key === 'Enter' && this.isEditing) {
       this.isEditing = false;
+      this.emit('zn-submit', {detail: {value: this.value, element: this}});
       this.formControlController.submit();
       this.input.blur();
     }
@@ -186,6 +187,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   handleSubmitClick = (e: MouseEvent) => {
     e.preventDefault();
     this.isEditing = false;
+    this.emit('zn-submit', {detail: {value: this.value, element: this}});
     this.formControlController.submit();
   };
 

package/src/components/navbar/navbar.component.ts

@@ -1,5 +1,6 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {ifDefined} from "lit/directives/if-defined.js";
 import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnDropdown from "../dropdown";
@@ -41,6 +42,7 @@ export default class ZnNavbar extends ZincElement {
   @property({type: Array}) dropdown = [];
   @property({attribute: "no-pad", type: Boolean}) noPad: false
   @property({attribute: 'manual-add-items', type: Boolean}) manualAddItems = false;
+  @property({type: Boolean}) isolated = false;
 
   private _preItems: NodeListOf<Element>;
   private _postItems: NodeListOf<Element>;
@@ -194,6 +196,17 @@ export default class ZnNavbar extends ZincElement {
     //console.log("Showing More")
   }
 
+  private handleClick = (e: MouseEvent) => {
+    const path = e.composedPath();
+    const tabAttr = this.isolated ? 'data-tab' : 'tab';
+    const li = path.find(el => el instanceof HTMLElement && el.tagName === 'LI' && (el.hasAttribute(tabAttr) || el.hasAttribute('tab-uri'))) as HTMLElement;
+
+    if (li) {
+      e.stopPropagation();
+      this.emit('zn-select', {detail: {item: li}});
+    }
+  };
+
   render() {
     if (!this.navigation) {
       this.navigation = [];
@@ -211,7 +224,7 @@ export default class ZnNavbar extends ZincElement {
         'navbar__container--stacked': this.stacked,
         'navbar__container--icon-bar': this.iconBar
       })}">
-        <ul class="${classMap({
+        <ul @click="${this.handleClick}" class="${classMap({
           'navbar': true,
           'navbar--slim': this.slim,
           'navbar--border': this.border,
@@ -232,7 +245,11 @@ export default class ZnNavbar extends ZincElement {
                 <li class="${classMap({'active': item.active})}" tab-uri="${item.path}">${content}</li>`;
             }
             return html`
-              <li class="${classMap({'active': item.active})}" tab="${item.tab}">${content}</li>`;
+              <li class="${classMap({'active': item.active})}"
+                  tab="${ifDefined(!this.isolated ? item.tab : undefined)}"
+                  data-tab="${ifDefined(this.isolated ? item.tab : undefined)}">
+                ${content}
+              </li>`;
           })}
           <li class="more">
             <zn-dropdown placement="bottom-end" id="extended-dropdown">

package/src/components/translations/translations.component.ts

@@ -10,6 +10,7 @@ import ZnNavbar from '../navbar';
 import type {PropertyValues} from 'lit';
 import type {ZincFormControl} from '../../internal/zinc-element';
 import type {ZnMenuSelectEvent} from '../../events/zn-menu-select';
+import type {ZnSelectEvent} from "../../events/zn-select";
 
 import styles from './translations.scss';
 
@@ -110,7 +111,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     }
   }
 
-  private handleLanguageAdd(e: ZnMenuSelectEvent) {
+  private handleLanguageAdd = (e: ZnMenuSelectEvent) => {
     const element = e.detail.element as HTMLElement;
     const languageCode = element.getAttribute('data-path');
     if (languageCode) {
@@ -119,21 +120,21 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
       this._activeLanguage = languageCode;
       this.updateValue();
     }
-  }
+  };
 
-  private handleNavbarClick(e: MouseEvent) {
-    const path = e.composedPath();
-    const li = path.find(el => el instanceof HTMLElement && el.tagName === 'LI' && el.hasAttribute('tab')) as HTMLElement;
+  private handleNavbarClick = (e: ZnSelectEvent) => {
+    e.stopPropagation();
+    const li = e.detail.item as HTMLElement;
     if (li) {
-      const tab = li.getAttribute('tab');
+      const tab = li.getAttribute('tab') || li.getAttribute('data-tab');
       if (tab) {
         this._activeLanguage = tab;
         this.requestUpdate();
       }
     }
-  }
+  };
 
-  private handleValueUpdate(e: CustomEvent) {
+  private handleValueUpdate = (e: CustomEvent) => {
     const target = e.target as (ZnInput | ZnInlineEdit);
     if (this._activeLanguage) {
       const newValue: string = target.value as string;
@@ -142,7 +143,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
         this.updateValue();
       }
     }
-  }
+  };
 
   private updateValue() {
     this.value = JSON.stringify(this.values);
@@ -150,6 +151,24 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
     this.emit('zn-input');
   }
 
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      if (event.target instanceof ZnInlineEdit) {
+        return;
+      }
+
+      const hasModifier = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+
+      if (!hasModifier && !event.defaultPrevented && !event.isComposing) {
+        this.formControlController.submit();
+      }
+    }
+  };
+
+  private handleSubmit = () => {
+    this.formControlController.submit();
+  };
+
   render() {
     const availableLanguages = Object.entries(this.languages)
       .filter(([code]) => !Object.prototype.hasOwnProperty.call(this.values, code))
@@ -178,7 +197,8 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
              'form-control': true,
              'form-control--medium': true,
              'form-control--has-label': hasLabel,
-           })}">
+           })}"
+           @keydown="${this.handleKeyDown}">
         <label part="form-control-label" class="form-control__label" for="input"
                aria-hidden=${hasLabel ? 'false' : 'true'}>
           <slot name="label">${this.label}</slot>
@@ -187,7 +207,9 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
         <zn-navbar
           .navigation="${navigation}"
           .dropdown="${availableLanguages}"
-          @click="${this.handleNavbarClick}"
+          name="${this.name}-translations-navbar"
+          isolated
+          @zn-select="${this.handleNavbarClick}"
           @zn-menu-select="${this.handleLanguageAdd}"
           manual-add-items
         ></zn-navbar>
@@ -196,12 +218,15 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
             ${useInlineEdit ? html`
               <zn-inline-edit
                 .value=${currentTranslation}
+                name="${this.name}"
                 @zn-change="${this.handleValueUpdate}"
                 @zn-input="${this.handleValueUpdate}"
+                @zn-submit="${this.handleSubmit}"
               ></zn-inline-edit>
             ` : html`
               <zn-input
                 .value="${currentTranslation || ''}"
+                name="${this.name}"
                 placeholder="Enter translation..."
                 @zn-change="${this.handleValueUpdate}"
               ></zn-input>

package/src/events/zn-select.ts

@@ -1,6 +1,6 @@
 import type ZnMenuItem from "../components/menu-item";
 
-export type ZnSelectEvent = CustomEvent<{ item: ZnMenuItem }>;
+export type ZnSelectEvent = CustomEvent<{ item: ZnMenuItem | HTMLElement }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {