@kubex/zinc 1.0.20 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "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';
 
@@ -35,7 +36,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   };
   @property({type: Object}) values: Record<string, string> = {};
 
-  @state() private _activeLanguage = '';
+  @state() private _activeLanguage = 'en';
 
   get validity(): ValidityState {
     return validValidityState;
@@ -99,18 +100,18 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
       this.value = JSON.stringify(this.values);
 
       // Ensure active language is valid
-      if (!this._activeLanguage || !Object.prototype.hasOwnProperty.call(this.values, this._activeLanguage)) {
+      if (!this._activeLanguage || (!Object.prototype.hasOwnProperty.call(this.values, this._activeLanguage) && this._activeLanguage !== 'en')) {
         const keys = Object.keys(this.values);
         if (keys.length > 0) {
           this._activeLanguage = keys[0];
         } else {
-          this._activeLanguage = '';
+          this._activeLanguage = 'en';
         }
       }
     }
   }
 
-  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,23 +151,45 @@ 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))
+      .filter(([code]) => code !== 'en' && !Object.prototype.hasOwnProperty.call(this.values, code))
       .map(([code, name]) => ({
         title: name,
         type: 'dropdown',
         path: code
       }));
 
-    const navigation = Object.keys(this.values).map(code => ({
+    const visibleTabs = Object.keys(this.values);
+    if (!visibleTabs.includes('en')) {
+      visibleTabs.unshift('en');
+    }
+
+    const navigation = visibleTabs.map(code => ({
       title: this.languages[code] || code,
       active: code === this._activeLanguage,
       tab: code
     }));
 
     const currentTranslation = this.values[this._activeLanguage];
-    const useInlineEdit = currentTranslation && currentTranslation.length > 0;
 
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasLabel = this.label ? true : hasLabelSlot;
@@ -178,7 +201,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,26 +211,21 @@ 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>
         <div class="input-container">
-          ${this._activeLanguage ? html`
-            ${useInlineEdit ? html`
-              <zn-inline-edit
-                .value=${currentTranslation}
-                @zn-change="${this.handleValueUpdate}"
-                @zn-input="${this.handleValueUpdate}"
-              ></zn-inline-edit>
-            ` : html`
-              <zn-input
-                .value="${currentTranslation || ''}"
-                placeholder="Enter translation..."
-                @zn-change="${this.handleValueUpdate}"
-              ></zn-input>
-            `}
-          ` : ''}
+          <zn-inline-edit
+            .value=${currentTranslation}
+            name="${this.name}"
+            placeholder="Enter translation..."
+            @zn-change="${this.handleValueUpdate}"
+            @zn-input="${this.handleValueUpdate}"
+            @zn-submit="${this.handleSubmit}"
+          ></zn-inline-edit>
         </div>
       </div>
     `;

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 {