@kubex/zinc 1.1.67 → 1.1.68

package/package.json

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

package/src/components/data-table/data-table.component.ts

@@ -36,6 +36,7 @@ const DEFAULT_PER_PAGE = 10;
 
 interface Cell {
   text: string;
+  subText?: string;
   column: string;
   color?: string;
   style?: string;
@@ -51,6 +52,7 @@ interface Cell {
   uri?: string;
   target?: string;
   copyable?: boolean;
+  title?: string;
 }
 
 interface Row {
@@ -123,7 +125,7 @@ const defaultTemplates = {
   dateTime: ((cell) => {
     const t = cell.text || '';
     return html`
-      <div class="table__collum--datetime">
+      <div class="table__collum--datetime" title="${ifDefined(cell.title)}">
         <span><strong>${t.slice(0, 10)}</strong></span>
         <zn-style size="s" muted>${t.slice(11)}</zn-style>
       </div>`
@@ -1037,7 +1039,7 @@ export default class ZnDataTable extends ZincElement {
     if (header?.cellTemplate !== undefined) {
       data = {...header.cellTemplate, ...data}
     }
-
+    
     let content: TemplateResult | ZincElement = html`${data.text}`;
 
     if (data.style || data.color) {
@@ -1063,55 +1065,25 @@ export default class ZnDataTable extends ZincElement {
           border="${isBorder || nothing}"
           center="${isCenter || nothing}"
           muted="${isMuted || nothing}"
-          color="${ifDefined(data.color)}">${content}
+          color="${ifDefined(data.color)}"
+          title="${ifDefined(data.title)}"
+        >${content}
         </zn-style>`;
     }
 
     if (data.uri) {
       content = html`
         <a href="${data.uri}"
+           title="${ifDefined(data.title)}"
            data-target="${ifDefined(data.target || nothing)}"
            gaid="${ifDefined(data.gaid || nothing)}">${content}</a>`;
     }
 
     if (data.chipColor) {
-      return html`
-        <zn-chip type="${data.chipColor}">${content}</zn-chip>`;
+      content = html`
+        <zn-chip type="${data.chipColor}" title="${ifDefined(data.title)}">${content}</zn-chip>`;
     }
 
-    if (data.hoverContent) {
-      const placement = data.hoverPlacement ?? 'top';
-
-      if (data.iconSrc) {
-        const src = data.iconSrc;
-        const color = data.iconColor;
-        const size = data.iconSize;
-        const tokens = (data.iconStyle ?? '').split(',').map(s => s.trim()).filter(Boolean);
-
-        return html`
-          ${content}
-          <zn-hover-container placement="${placement}" flip>
-            <zn-icon
-              src="${src}"
-              size="${ifDefined(size)}"
-              color="${ifDefined(color)}"
-              ${ref(el => {
-                if (!el) return;
-                tokens.forEach(t => el.setAttribute(t, ''));
-              })}
-            ></zn-icon>
-            <div slot="content">
-              ${unsafeHTML(data.hoverContent)}
-            </div>
-          </zn-hover-container>`;
-      }
-
-      return html`
-        <zn-hover-container placement="${placement}" flip>
-          <div slot="anchor">${content}</div>
-          ${unsafeHTML(data.hoverContent)}
-        </zn-hover-container>`;
-    }
 
     if (data.iconSrc) {
       const src = data.iconSrc;
@@ -1119,24 +1091,57 @@ export default class ZnDataTable extends ZincElement {
       const size = data.iconSize;
       const tokens = (data.iconStyle ?? '').split(',').map(s => s.trim()).filter(Boolean);
 
-      return html`
+      content = html`
         <zn-icon
           src="${src}"
           size="${ifDefined(size)}"
           color="${ifDefined(color)}"
           ${ref(el => {
-            if (!el) return;
-            tokens.forEach(t => el.setAttribute(t, ''));
-          })}
+        if (!el) return;
+        tokens.forEach(t => el.setAttribute(t, ''));
+      })}
+          title="${ifDefined(data.title)}"
         ></zn-icon> ${content}`;
     }
 
+    if (data.hoverContent) {
+      const placement = data.hoverPlacement ?? 'top';
+      if (data.iconSrc) {
+        content = html`
+          <zn-hover-container placement="${placement}" flip>
+            ${content}
+            <div slot="content">
+              ${unsafeHTML(data.hoverContent)}
+            </div>
+          </zn-hover-container>`;
+      } else {
+        content = html`
+          <zn-hover-container placement="${placement}" flip>
+            ${content}
+            <div slot="content">
+                ${unsafeHTML(data.hoverContent)}
+            </div>
+          </zn-hover-container>`;
+      }
+    }
+
     if (data.copyable) {
-      return html`
+      content = html`
         ${content}
         <zn-copy-button value="${data.text}"></zn-copy-button>`;
     }
 
+
+    if (data.subText) {
+      content = html`
+        <div>
+          <div>${content}</div>
+          <span class="table__cell--subtext">${data.subText}</span>
+        </div>
+      `
+    }
+
+
     return content;
 
   }
@@ -1217,7 +1222,7 @@ export default class ZnDataTable extends ZincElement {
       return !header.secondary;
     });
     const header: HeaderConfig | undefined = filteredHeaders[index];
-    const headerKey: string = header?.key;
+    const headerKey: string | undefined = header?.key;
 
     return html`
       <td

package/src/components/data-table/data-table.scss

@@ -444,3 +444,7 @@ tbody tr.table__row--error td {
   align-items: flex-end;
   gap:2px;
 }
+
+.table__cell--subtext{
+  @include wc.text-style(subheading-small);
+}

package/src/components/data-table/data-table.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { render } from 'lit';
 import type ZnDataTable from './data-table.component';
 
 describe('<zn-data-table>', () => {
@@ -124,4 +125,45 @@ describe('<zn-data-table>', () => {
     const templates = (el as unknown as {displayTemplates: Record<string, unknown>}).displayTemplates;
     expect(templates).to.be.an('object');
   });
+
+  it('renders subText as muted secondary text', async () => {
+    const el = await fixture<ZnDataTable>(html` <zn-data-table></zn-data-table> `);
+    const container = document.createElement('div');
+    render(el.renderCell({text: 'Main', column: 'name', subText: 'Secondary'}), container);
+
+    const subtext = container.querySelector('.table__cell--subtext');
+    expect(subtext).to.exist;
+    expect(subtext?.textContent).to.contain('Secondary');
+    expect(container.textContent).to.contain('Main');
+  });
+
+  it('applies title as a tooltip on link cells', async () => {
+    const el = await fixture<ZnDataTable>(html` <zn-data-table></zn-data-table> `);
+    const container = document.createElement('div');
+    render(el.renderCell({text: 'Go', column: 'name', uri: 'https://example.com', title: 'Tip'}), container);
+
+    const link = container.querySelector('a');
+    expect(link).to.exist;
+    expect(link?.getAttribute('title')).to.equal('Tip');
+  });
+
+  it('applies title as a tooltip on styled cells', async () => {
+    const el = await fixture<ZnDataTable>(html` <zn-data-table></zn-data-table> `);
+    const container = document.createElement('div');
+    render(el.renderCell({text: 'Val', column: 'name', style: 'bold', title: 'Info'}), container);
+
+    const styled = container.querySelector('zn-style');
+    expect(styled).to.exist;
+    expect(styled?.getAttribute('title')).to.equal('Info');
+  });
+
+  it('omits the title attribute when no title is provided', async () => {
+    const el = await fixture<ZnDataTable>(html` <zn-data-table></zn-data-table> `);
+    const container = document.createElement('div');
+    render(el.renderCell({text: 'Plain', column: 'name', uri: 'https://example.com'}), container);
+
+    const link = container.querySelector('a');
+    expect(link).to.exist;
+    expect(link?.hasAttribute('title')).to.be.false;
+  });
 });

package/src/components/defined-label/defined-label.component.ts

@@ -1,15 +1,23 @@
-import {type CSSResultGroup, html, type PropertyValues, type TemplateResult, unsafeCSS} from 'lit';
+import {type CSSResultGroup, html, nothing, type PropertyValues, type TemplateResult, unsafeCSS} from 'lit';
 import {FormControlController} from '../../internal/form';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {property, query} from 'lit/decorators.js';
 import {watch} from '../../internal/watch';
 import ZincElement from '../../internal/zinc-element';
+import ZnButton from '../button';
+import ZnDropdown from '../dropdown';
+import ZnInput from '../input';
+import ZnOption from '../option';
+import ZnSelect from '../select';
 import type {ZincFormControl} from '../../internal/zinc-element';
-import type ZnDropdown from '../dropdown';
-import type ZnInput from '../input';
 
 import styles from './defined-label.scss';
 
+interface PredefinedLabel {
+  name: string;
+  options?: string[];
+}
+
 /**
  * @summary This component provides a labeled input with support for predefined and custom labels,
  * allowing users to select or enter label-value pairs within a dropdown interface.
@@ -21,31 +29,51 @@ import styles from './defined-label.scss';
  * @dependency zn-dropdown
  * @dependency zn-input
  * @dependency zn-option
- * @dependency zn-panel
  * @dependency zn-select
- * @dependency zn-sp
  *
  * @csspart input - The component's main input.
  * @csspart input-value - The label's value inputs.
  */
 export default class ZnDefinedLabel extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-button': ZnButton,
+    'zn-dropdown': ZnDropdown,
+    'zn-input': ZnInput,
+    'zn-option': ZnOption,
+    'zn-select': ZnSelect
+  };
 
   private readonly formControlController = new FormControlController(this, {
     value: (control: this) => control.value + (control.inputValue ? `:${control.inputValue}` : ''),
   });
 
-  @query('.input__control') input: ZnInput;
+  @query('.defined-label__input') input: ZnInput;
   @query('.defined-label__dropdown') dropdown: ZnDropdown;
 
+  /** The selected label key. Also acts as the filter while typing. */
   @property() value: string = '';
+
+  /** The value entered for the selected label. Submitted as `label:value` when present. */
   @property() inputValue: string = '';
+
+  /** The size of the main input. */
   @property({attribute: 'input-size', reflect: true}) inputSize: 'x-small' | 'small' | 'medium' | 'large' = 'medium';
+
+  /** The name of the control. Used for form submission. */
   @property() name: string = 'label';
+
+  /** The title of the main input. */
   @property() title: string;
+
+  /** Disables the control. */
   @property({type: Boolean}) disabled: boolean = false;
+
+  /** Allows labels that aren't in the predefined list. */
   @property({attribute: 'allow-custom', type: Boolean}) allowCustom: boolean = false;
-  @property({type: Array, attribute: 'predefined-labels'}) predefinedLabels = [];
+
+  /** The predefined labels. Entries are either a string or `{name, options}`. */
+  @property({type: Array, attribute: 'predefined-labels'}) predefinedLabels: (PredefinedLabel | string)[] = [];
 
   get validationMessage() {
     return this.input.validationMessage;
@@ -83,6 +111,14 @@ export default class ZnDefinedLabel extends ZincElement implements ZincFormContr
     this.formControlController.updateValidity();
   }
 
+  private getFilteredLabels(): PredefinedLabel[] {
+    const filter = this.value.toLowerCase();
+    return this.predefinedLabels
+      .map(label => typeof label === 'string' ? {name: label} : label)
+      .filter((label): label is PredefinedLabel => Boolean(label?.name))
+      .filter(label => !filter || label.name.toLowerCase().includes(filter));
+  }
+
   private handleChange() {
     if (!this.dropdown.open) {
       this.dropdown.show().then(r => r);
@@ -117,14 +153,18 @@ export default class ZnDefinedLabel extends ZincElement implements ZincFormContr
     if (target.hasAttribute('data-label')) this.value = target.getAttribute('data-label') ?? "";
   }
 
-  private handleInputValueInput(e: Event) {
-    const target = e.target as HTMLInputElement | HTMLSelectElement;
-    this.inputValue = target.value.toLowerCase();
-
-    if (target.hasAttribute('data-label')) this.value = target.getAttribute('data-label') ?? "";
-  }
+  private handleFormSubmit(e: Event, label?: string) {
+    // Sync from the submitted row so a partially typed filter never wins over
+    // the row's actual label key, and stale values from other rows are discarded
+    const row = (e.currentTarget as HTMLElement).closest('.defined-label__row');
+    const control = row?.querySelector<ZnInput | ZnSelect>('.defined-label__value');
+    if (label) {
+      this.value = label;
+    }
+    if (control) {
+      this.inputValue = String(control.value ?? '').toLowerCase();
+    }
 
-  private handleFormSubmit() {
     const form = this.formControlController.getForm();
 
     if (form && form.reportValidity()) {
@@ -135,106 +175,89 @@ export default class ZnDefinedLabel extends ZincElement implements ZincFormContr
     }
   }
 
-  render() {
-    let predefinedLabels = html``;
-
-    if (this.predefinedLabels.length > 0) {
-      this.predefinedLabels.forEach((label: { [key: string]: any } | string | null) => {
-        // label = ['name' => 'label', 'options'=>['one', 'two', 'three']]
-        let options: string[] | undefined;
-        if (label && typeof label !== 'string') {
-          options = label.options as string[];
-          label = label.name as string;
-        }
-
-        if (this.value && !label?.toLowerCase().includes(this.value.toLowerCase())) {
-          return;
-        }
-
-        let selector: TemplateResult<1>;
-        if (options && options.length > 0) {
-          selector = html`
-            <zn-select
-              part="input-value"
-              id="input-value input-value-${label}"
-              class="input__control-value input__control-value--${label}"
-              data-label="${label}"
-              @zn-change="${this.handleInputValueChange}"
-              @zn-input="${this.handleInputValueInput}"
-              size="small">
-              <zn-option value="">Select ${label}</zn-option>
-              ${options.map((option: string) => html`
-                <zn-option value="${option}">${option}</zn-option>
-              `)}
-            </zn-select>`;
-        } else {
-          selector = html`
-            <zn-input
-              part="input-value"
-              id="input-value input-value-${label}"
-              class="input__control-value input__control-value--${label}"
-              type="text"
-              data-label="${label}"
-              @zn-change="${this.handleInputValueChange}"
-              @zn-input="${this.handleInputValueInput}"
-              size="small"></zn-input>`;
-        }
-
-        predefinedLabels = html`
-          <div class="defined-label__input">
-            <small>${label}</small>
-            <div class="defined-label__input-wrap">
-              ${selector}
-              <zn-button type="submit" icon="add" @click="${this.handleFormSubmit}"></zn-button>
-            </div>
-          </div>`;
-      });
+  private renderValueControl(label: PredefinedLabel): TemplateResult {
+    if (label.options && label.options.length > 0) {
+      return html`
+        <zn-select
+          part="input-value"
+          class="defined-label__value"
+          data-label="${label.name}"
+          size="small"
+          @zn-change="${this.handleInputValueChange}"
+          @zn-input="${this.handleInputValueChange}">
+          <zn-option value="">Select ${label.name}</zn-option>
+          ${label.options.map(option => html`
+            <zn-option value="${option}">${option}</zn-option>`)}
+        </zn-select>`;
     }
 
     return html`
-      <zn-dropdown class="defined-label__dropdown">
+      <zn-input
+        part="input-value"
+        class="defined-label__value"
+        type="text"
+        placeholder="Label Value"
+        data-label="${label.name}"
+        size="small"
+        @zn-change="${this.handleInputValueChange}"
+        @zn-input="${this.handleInputValueChange}"></zn-input>`;
+  }
+
+  private renderRow(name: string, control: TemplateResult, label?: string): TemplateResult {
+    return html`
+      <div class="defined-label__row">
+        <small class="defined-label__row-label">${name}</small>
+        <div class="defined-label__row-controls">
+          ${control}
+          <zn-button
+            type="submit"
+            icon="add"
+            @click="${(e: Event) => this.handleFormSubmit(e, label)}"></zn-button>
+        </div>
+      </div>`;
+  }
+
+  render() {
+    const labels = this.getFilteredLabels();
+
+    return html`
+      <zn-dropdown class="defined-label__dropdown" sync="width">
         <zn-input
           part="input"
           id="input"
-          class="input__control"
+          class="defined-label__input"
           type="text"
-          title="${this.title}"
+          title="${ifDefined(this.title)}"
           value="${this.value}"
           name="${ifDefined(this.name)}"
           placeholder="Add a Label"
           maxlength="60"
           autocomplete="off"
           size="${this.inputSize}"
+          ?disabled="${this.disabled}"
           @zn-change="${this.handleChange}"
           @zn-input="${this.handleInput}"
           @click="${this.handleClick}"
           slot="trigger"
         ></zn-input>
 
-        <zn-panel class="defined-label__container">
-          <zn-sp flush divide>
-            ${predefinedLabels.values.length > 0 ? predefinedLabels : html`
-              <div class="defined-label__input">
-                <small>Cannot find any predefined labels</small>
-              </div>`}
-
-            ${this.allowCustom && this.value !== '' ? html`
-              <div class="defined-label__input">
-                <small>${this.value}</small>
-                <div class="defined-label__input-wrap">
-                  <zn-input part="input-value"
-                            placeholder="Label Value"
-                            type="text"
-                            size="small"
-                            maxlength="60"
-                            @zn-change="${this.handleInputValueChange}"
-                            @zn-input="${this.handleInputValueInput}"></zn-input>
-                  <zn-button type="submit" icon="add" @click="${this.handleFormSubmit}"></zn-button>
-                </div>
-              </div>` : ''}
-
-          </zn-sp>
-        </zn-panel>
+        <div class="defined-label__panel">
+          ${labels.length > 0
+            ? labels.map(label => this.renderRow(label.name, this.renderValueControl(label), label.name))
+            : html`
+              <div class="defined-label__empty">Cannot find any predefined labels</div>`}
+
+          ${this.allowCustom && this.value !== '' ? this.renderRow(this.value, html`
+            <zn-input
+              part="input-value"
+              class="defined-label__value"
+              placeholder="Label Value"
+              type="text"
+              size="small"
+              maxlength="60"
+              @zn-change="${this.handleInputValueChange}"
+              @zn-input="${this.handleInputValueChange}"></zn-input>`) : nothing}
+        </div>
       </zn-dropdown>
     `;
   }

package/src/components/defined-label/defined-label.scss

@@ -4,40 +4,52 @@
   display: contents;
 }
 
-.defined-label {
-  .input__control, .input__control-value {
-    background-color: rgb(var(--zn-panel));
-  }
+.defined-label__dropdown {
+  width: 100%;
+}
 
-  &__dropdown {
-    width: 100%;
-  }
+.defined-label__panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 260px;
+  max-height: 275px;
+  overflow-y: auto;
+  overscroll-behavior: none;
+  background-color: rgb(var(--zn-panel));
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius);
+  box-shadow: 0 4px 8px -4px rgba(33, 33, 33, 0.1);
+}
 
-  &__container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--zn-spacing-small);
-    width: 100%;
+.defined-label__row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zn-spacing-x-small);
+  padding: var(--zn-spacing-small);
 
-    zn-sp {
-      max-height: 275px;
-    }
+  & + & {
+    border-top: 1px solid rgb(var(--zn-border-color));
   }
+}
 
-  &__input {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
+.defined-label__row-label {
+  font-size: var(--zn-font-size-small);
+  color: rgb(var(--zn-text-muted));
+}
 
-    &-wrap {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
+.defined-label__row-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
 
-    zn-input, zn-select {
-      flex-grow: 1;
-    }
+  .defined-label__value {
+    flex-grow: 1;
   }
 }
+
+.defined-label__empty {
+  padding: var(--zn-spacing-small);
+  font-size: var(--zn-font-size-small);
+  color: rgb(var(--zn-text-muted));
+  text-align: center;
+}