@kubex/zinc 1.1.89 → 1.1.91

package/docs/pages/components/editor.md

@@ -321,7 +321,6 @@ Add custom quick actions to the context menu using the `zn-editor-quick-action`
 ```html:preview
 <zn-editor
   name="content"
-  value="<p>Select this text to see custom quick actions in the context menu</p>"
   style="height: 300px">
   <zn-editor-quick-action
     slot="context-items"

package/package.json

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

package/src/components/absolute-container/absolute-container.component.ts

@@ -14,6 +14,7 @@ import type {PropertyValues} from 'lit';
  *
  */
 export default class ZnAbsoluteContainer extends ZincElement {
+  private _resizeFrame: number | null = null;
 
   constructor() {
     super();
@@ -30,12 +31,30 @@ export default class ZnAbsoluteContainer extends ZincElement {
     this.resize();
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._resizeFrame !== null) {
+      cancelAnimationFrame(this._resizeFrame);
+      this._resizeFrame = null;
+    }
+  }
+
   resize() {
-    let newSize = 0;
-    Array.from(this.children).forEach((child) => {
-      newSize += child.getBoundingClientRect().height;
+    if (this._resizeFrame !== null) {
+      return;
+    }
+    this._resizeFrame = requestAnimationFrame(() => {
+      this._resizeFrame = null;
+      let newSize = 0;
+      Array.from(this.children).forEach((child) => {
+        newSize += child.getBoundingClientRect().height;
+      });
+      const minHeight = newSize + 'px';
+      // Guarded write: setting style re-triggers our own MutationController
+      if (this.style.minHeight !== minHeight) {
+        this.style.minHeight = minHeight;
+      }
     });
-    this.style.minHeight = newSize + 'px';
   }
 
   // the height of this element is set to the height of its children (absolute positioned)

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

@@ -120,6 +120,9 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   /** The heading shown above the slash menu's items. */
   @property({ attribute: 'slash-heading' }) slashHeading = 'Insert';
 
+  /** Hides the insertion keys normally shown against the slash menu's items. */
+  @property({ attribute: 'slash-hide-keys', type: Boolean }) slashHideKeys = false;
+
   /** Resolves additional slash menu items each time the menu opens. JavaScript only. */
   @property({ attribute: false }) slashItemsProvider?: (query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]>;
 
@@ -463,6 +466,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
         slash-trigger="${this.slashTrigger}"
         slash-heading="${this.slashHeading}"
         slash-preset="${this.slashPreset}"
+        ?slash-hide-keys="${this.slashHideKeys}"
         .slashItems="${this.slashItems}"
         .slashItemsProvider="${this.slashItemsProvider}"
         @zn-input="${this.handleInput}"
@@ -485,6 +489,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
                 slash-trigger="${this.slashTrigger}"
                 slash-heading="${this.slashHeading}"
                 slash-preset="${this.slashPreset}"
+                ?slash-hide-keys="${this.slashHideKeys}"
                 .slashItems="${this.slashItems}"
                 .slashItemsProvider="${this.slashItemsProvider}"
                 @zn-input="${this.handleInput}"

package/src/components/input/input.component.ts

@@ -279,6 +279,9 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   /** The heading shown above the slash menu's items. */
   @property({attribute: 'slash-heading'}) slashHeading = 'Insert';
 
+  /** Hides the insertion keys normally shown against the slash menu's items. */
+  @property({attribute: 'slash-hide-keys', type: Boolean}) slashHideKeys = false;
+
   /**
    * Resolves additional items each time the menu opens, for lists that come from elsewhere (e.g. an
    * API). Receives the current query and may return a promise. JavaScript only.
@@ -1097,7 +1100,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
           </div>
           ${this.hasSlashMenu
             ? html`
-              <zn-slash-menu part="slash-menu" heading=${this.slashHeading}></zn-slash-menu>`
+              <zn-slash-menu part="slash-menu" heading=${this.slashHeading} ?hide-keys=${this.slashHideKeys}></zn-slash-menu>`
             : ''}
           <slot name="slash-menu"></slot>
           <slot name="slash-items" hidden></slot>

package/src/components/scroll-container/scroll-container.component.ts

@@ -1,4 +1,4 @@
-import {type CSSResultGroup, html, unsafeCSS, PropertyValues} from 'lit';
+import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property, query} from "lit/decorators.js";
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
@@ -34,6 +34,9 @@ export default class ZnScrollContainer extends ZincElement {
   @query('.scroll-footer')
   private footer: HTMLElement;
 
+  private _footerObserved: boolean = false;
+  private _footerHeightFrame: number | null = null;
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     if (this.startScrolled && this.container) {
@@ -41,15 +44,34 @@ export default class ZnScrollContainer extends ZincElement {
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._footerHeightFrame !== null) {
+      cancelAnimationFrame(this._footerHeightFrame);
+      this._footerHeightFrame = null;
+    }
+  }
+
   scrollEnd() {
     this.container.scrollTop = this.container.scrollHeight;
   }
 
+  private _syncFooterHeight() {
+    if (this._footerHeightFrame !== null) {
+      return;
+    }
+    this._footerHeightFrame = requestAnimationFrame(() => {
+      this._footerHeightFrame = null;
+      const height = `${this.footer?.clientHeight ?? 0}px`;
+      if (this.style.getPropertyValue('--zn-scroll-footer-height') !== height) {
+        this.style.setProperty('--zn-scroll-footer-height', height);
+      }
+    });
+  }
+
   private readonly _footerResizeObserver = new ResizeController(this, {
     target: null,
-    callback: () => {
-      this.style.setProperty('--zn-scroll-footer-height', `${this.footer?.clientHeight ?? 0}px`);
-    },
+    callback: () => this._syncFooterHeight(),
   });
 
   private readonly _domObserver = new MutationController(this, {
@@ -58,8 +80,11 @@ export default class ZnScrollContainer extends ZincElement {
     callback: () => {
       setTimeout(() => this.scrollEnd(), 100);
       if (this.footer) {
-        this.style.setProperty('--zn-scroll-footer-height', `${this.footer.clientHeight}px`);
-        this._footerResizeObserver.observe(this.footer);
+        this._syncFooterHeight();
+        if (!this._footerObserved) {
+          this._footerObserved = true;
+          this._footerResizeObserver.observe(this.footer);
+        }
       }
     },
   });

package/src/components/slash-menu/slash-menu.component.ts

@@ -65,6 +65,9 @@ export default class ZnSlashMenu extends ZincElement {
   /** The most items to render at once. Remaining matches are reported in the footer. */
   @property({attribute: 'max-items', type: Number}) maxItems = 25;
 
+  /** Hides the insertion key (the item's value) normally shown against each item. */
+  @property({attribute: 'hide-keys', type: Boolean}) hideKeys = false;
+
   /** The element or caret rect the panel is positioned against. */
   @property({attribute: false}) anchor: Element | VirtualElement | null = null;
 
@@ -269,7 +272,7 @@ export default class ZnSlashMenu extends ZincElement {
 
   private renderItem(item: SlashMenuItem, index: number, showIcons: boolean) {
     const isActive = index === this.activeIndex;
-    const token = item.value && item.value !== item.label && !item.value.includes('\n') ? item.value : '';
+    const token = !this.hideKeys && item.value && item.value !== item.label && !item.value.includes('\n') ? item.value : '';
 
     return html`
       <button

package/src/components/textarea/textarea.component.ts

@@ -203,6 +203,9 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
   /** The heading shown above the slash menu's items. */
   @property({attribute: 'slash-heading'}) slashHeading = 'Insert';
 
+  /** Hides the insertion keys normally shown against the slash menu's items. */
+  @property({attribute: 'slash-hide-keys', type: Boolean}) slashHideKeys = false;
+
   /**
    * Resolves additional items each time the menu opens, for lists that come from elsewhere (e.g. an
    * API). Receives the current query and may return a promise. JavaScript only.
@@ -584,7 +587,7 @@ export default class ZnTextarea extends ZincElement implements ZincFormControl {
           </div>
           ${this.hasSlashMenu
             ? html`
-              <zn-slash-menu part="slash-menu" heading=${this.slashHeading}></zn-slash-menu>`
+              <zn-slash-menu part="slash-menu" heading=${this.slashHeading} ?hide-keys=${this.slashHideKeys}></zn-slash-menu>`
             : ''}
           <slot name="slash-menu"></slot>
           <slot name="slash-items" hidden></slot>

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

@@ -72,6 +72,9 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   /** The heading shown above the slash menu's items. */
   @property({attribute: 'slash-heading'}) slashHeading = 'Insert';
 
+  /** Hides the insertion keys normally shown against the slash menu's items. */
+  @property({attribute: 'slash-hide-keys', type: Boolean}) slashHideKeys = false;
+
   /** Resolves additional slash menu items each time the menu opens. JavaScript only. */
   @property({attribute: false}) slashItemsProvider?: (query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]>;
 
@@ -444,6 +447,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
               slash-trigger="${this.slashTrigger}"
               slash-heading="${this.slashHeading}"
               slash-preset="${this.slashPreset}"
+              ?slash-hide-keys="${this.slashHideKeys}"
               .slashItems="${this.slashItems}"
               .slashItemsProvider="${this.slashItemsProvider}"
               @zn-change="${this.handleValueUpdate}"