@kubex/zinc 1.0.5 → 1.0.6

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

@@ -19,7 +19,7 @@ import ZnHoverContainer from "../hover-container";
 import ZnMenu from "../menu";
 import ZnMenuItem from "../menu-item";
 import ZnSkeleton from "../skeleton";
-
+import ZnStyle from "../style";
 import type ZnDataSelect from "../data-select";
 import type ZnInput from "../input";
 import type ZnQueryBuilder from "../query-builder";
@@ -148,6 +148,7 @@ export default class ZnDataTable extends ZincElement {
     'zn-button-group': ZnButtonGroup,
     'zn-confirm': ZnConfirm,
     'zn-skeleton': ZnSkeleton,
+    'zn-style': ZnStyle,
   };
 
   @property({attribute: 'data-uri'}) dataUri: string;
@@ -330,12 +331,15 @@ export default class ZnDataTable extends ZincElement {
       || this.hasSlotController.test(ActionSlots.create.valueOf())
       || this.hasSlotController.test(ActionSlots.sort.valueOf())
       || this.hasSlotController.test(ActionSlots.filter.valueOf())
-      || this.hasSlotController.test(ActionSlots.filter_top.valueOf())
-      || this.hasSlotController.test(ActionSlots.inputs.valueOf());
+      || this.hasSlotController.test(ActionSlots.filter_top.valueOf());
+
+    const hasInputs = this.hasSlotController.test(ActionSlots.inputs.valueOf());
 
     // Headers do not need to be re-rendered with new data
     return html`
       <div class="table-container" ${ref((el) => (this.tableContainer = el))}>
+        ${hasInputs ? html`
+          <slot name="${ActionSlots.inputs.valueOf()}" style="display: none"></slot>` : null}
         ${hasActions ? this.getTableHeader() : html``}
         ${tableBody}
       </div>
@@ -420,7 +424,7 @@ export default class ZnDataTable extends ZincElement {
           'table': true,
           'table--standalone': this.standalone,
           'with-hover': !this.unsortable,
-          'table-with--checkboxes': !this.hideCheckboxes,
+          'table--with-checkboxes': !this.hideCheckboxes,
         })}">
           <thead>
           <tr>
@@ -454,7 +458,6 @@ export default class ZnDataTable extends ZincElement {
   getTableHeader() {
     return html`
       <slot name="${ActionSlots.filter_top.valueOf()}"></slot>
-      <slot name="${ActionSlots.inputs.valueOf()}" style="display: none"></slot>
       <div class="table__header">
         <div class="table__header__actions">
           ${this.getActions()}
@@ -631,29 +634,33 @@ export default class ZnDataTable extends ZincElement {
     this.requestUpdate();
   }
 
-  selectRow(e: PointerEvent) {
+  selectRow(e: Event) {
     if (!(e.target && (e.target instanceof Element))) {
       return;
     }
 
-    let target: HTMLElement = e.target as HTMLElement;
+    const target: Element | null = e.target;
     // if is a button or a link continue
-    if (target.tagName === 'ZN-BUTTON' || target.tagName === 'A' || target.tagName === 'BUTTON') {
-      return
+    if (target?.tagName === 'ZN-BUTTON' || target?.tagName === 'A' || target?.tagName === 'BUTTON') {
+      return;
     }
 
-    // traverse parent until we reach a tr
-    while (target && target.tagName !== 'TR') {
-      target = target.parentElement as HTMLElement;
+    // Find the parent row
+    let parent: Element | null = target.closest ? target.closest('tr') : target.parentElement;
+    while (parent && parent.tagName !== 'TR') {
+      parent = parent.parentElement;
     }
 
-    if (target === null) {
+    if (parent === null) {
       return;
     }
 
-    const checkbox = target.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    const checkbox: HTMLInputElement | null = parent.querySelector('input[type="checkbox"]');
     if (checkbox) {
-      checkbox.checked = !checkbox.checked;
+      const isCheckboxTarget = target instanceof HTMLInputElement && target.type === 'checkbox';
+      if (!isCheckboxTarget) {
+        checkbox.checked = !checkbox.checked;
+      }
     }
 
     this.selectedRows = this._rows.filter((_, index) => {
@@ -690,12 +697,30 @@ export default class ZnDataTable extends ZincElement {
 
   renderCell(data: Cell) {
     if (data && typeof data === 'object') {
-      let content: TemplateResult = html`${data.text}`;
+      let content: TemplateResult | ZincElement = html`${data.text}`;
 
       if (data.style || data.color) {
+        const styleStr = typeof data.style === 'string' ? data.style : '';
+        const tokens = new Set(styleStr.split(',').filter(Boolean));
+
+        const isMono = tokens.has('mono') || tokens.has('code');
+        const isBorder = tokens.has('border');
+        const isCenter = tokens.has('center');
+
+        if (tokens.has('bold') || tokens.has('strong')) {
+          content = html`<strong>${content}</strong>`;
+        }
+
+        if (tokens.has('italic')) {
+          content = html`<em>${content}</em>`;
+        }
+
         content = html`
-          <zn-style ${ifDefined(data.style || nothing)}
-                    color="${ifDefined(data.color || nothing)}">${content}
+          <zn-style
+            font="${isMono ? 'mono' : nothing}"
+            border="${isBorder || nothing}"
+            center="${isCenter || nothing}"
+            color="${ifDefined(data.color)}">${content}
           </zn-style>`;
       }
 

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

@@ -105,6 +105,8 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     document.addEventListener('keydown', this.escKeyHandler);
     document.addEventListener('keydown', this.submitKeyHandler);
     document.addEventListener('click', this.mouseEventHandler);
+    this.addEventListener('mousedown', this.captureMouseDown, {capture: true});
+    this.addEventListener('keydown', this.captureKeyDown, {capture: true});
   }
 
   disconnectedCallback() {
@@ -112,6 +114,8 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     document.removeEventListener('keydown', this.escKeyHandler);
     document.removeEventListener('keydown', this.submitKeyHandler);
     document.removeEventListener('click', this.mouseEventHandler);
+    this.removeEventListener('mousedown', this.captureMouseDown, true);
+    this.removeEventListener('keydown', this.captureKeyDown, true);
   }
 
   async firstUpdated() {
@@ -157,6 +161,19 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     }
   }
 
+  captureMouseDown = (e: MouseEvent) => {
+    if (this.disabled && !this.isEditing) {
+      e.stopPropagation();
+    }
+  }
+
+  captureKeyDown = (e: KeyboardEvent) => {
+    if (this.disabled && !this.isEditing) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }
+
   handleEditClick = (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -183,6 +200,9 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   };
 
   handleInput = (e: Event) => {
+    if (this.disabled || !this.isEditing) {
+      return;
+    }
     this.value = (e.target as (HTMLInputElement | HTMLSelectElement)).value;
   };
 
@@ -224,7 +244,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
         'ai--padded': this.padded,
       })}">
 
-        <div class="ai__left" @click="${this.handleEditClick}">
+        <div class="ai__left" @click="${this.disabled ? undefined : this.handleEditClick}">
           ${input}
         </div>
 
@@ -232,10 +252,11 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
           ${!this.isEditing ?
             html`
               ${hasEditText ? html`
-                <zn-button @click="${this.handleEditClick}" size="x-small" color="secondary">
+                <zn-button @click="${this.disabled ? undefined : this.handleEditClick}" size="x-small"
+                           color="secondary">
                   ${this.editText}
                 </zn-button>` : html`
-                <zn-button @click="${this.handleEditClick}"
+                <zn-button @click="${this.disabled ? undefined : this.handleEditClick}"
                            class="button--edit"
                            icon="edit"
                            size="x-small"

package/src/components/inline-edit/inline-edit.scss

@@ -133,7 +133,17 @@
     }
   }
 
-  &--disabled {
+  &--disabled:not(.ai--editing) {
+    .ai__input::part(input), .ai__input::part(combobox) {
+      text-decoration: none;
+      caret-color: transparent;
+      border-radius: 0;
+    }
+
+    .ai__input::part(display-input) {
+      cursor: text;
+    }
+
     .ai__right {
       display: none !important;
     }

package/src/components/item/item.scss

@@ -4,7 +4,7 @@
   display: block;
   container-type: inline-size;
 
-  --zn-item-label-max-width: 300px;
+  --zn-item-label-max-width: 450px;
 }
 
 .item {
@@ -29,7 +29,7 @@
   &--has-icon {
     .item__icon {
       position: relative;
-      line-height: 33px;
+      line-height: var(--zn-line-height-loose);
       display: flex;
       justify-content: center;
       margin-right: var(--zn-spacing-small);
@@ -44,8 +44,6 @@
   &__header {
     display: flex;
     align-items: center;
-    max-width: var(--zn-item-label-max-width);
-    width: 100%;
 
     .item__caption {
       width: unset;
@@ -56,8 +54,11 @@
   &__headings {
     display: flex;
     flex-direction: column;
-    max-width: var(--zn-item-label-max-width);
-    width: 100%;
+    max-width: 40%;
+    @include wc.container-query(null, sm) {
+      max-width: unset;
+    }
+    width: var(--zn-item-label-max-width);
     flex-shrink: 0;
   }
 
@@ -65,7 +66,7 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    line-height: 33px;
+    line-height: var(--zn-line-height-loose);
   }
 
   &__content-inner {
@@ -84,14 +85,9 @@
   &__caption {
     font-weight: 500;
     color: rgb(var(--zn-text-heading));
-    line-height: var(--zn-line-height-normal);
-    max-width: var(--zn-item-label-max-width);
+    line-height: var(--zn-line-height-loose);
     width: 100%;
     flex-shrink: 0;
-
-    @include wc.container-query(null, sm) {
-      line-height: var(--zn-line-height-normal);
-    }
   }
 
   &__description {
@@ -100,9 +96,6 @@
     margin: var(--zn-spacing-2x-small) 0 0;
     font-size: var(--zn-font-size-small);
     color: rgb(var(--zn-text-color));
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 
   &__action-wrapper {
@@ -159,7 +152,6 @@
   }
 
   &--inline {
-
     gap: var(--zn-spacing-small);
 
     .item__header {

package/src/components/settings-container/settings-container.scss

@@ -5,6 +5,7 @@
 }
 
 .container {
+  padding-bottom: 30px;
 }
 
 .container--scroll {
@@ -19,7 +20,6 @@
   width: 100%;
   overflow: auto;
   box-sizing: border-box;
-  padding-bottom: 60px;
 }
 
 .setting-container__dropdown {
@@ -32,6 +32,9 @@
   background: rgba(var(--zn-panel, 0.8));
   box-shadow: var(--zn-shadow-small);
   transition: bottom 0.2s ease;
+  opacity: 0.7;
+  transition-duration: 0.3s;
+  transition-property: opacity;
 
   &:hover {
     background: rgba(var(--zn-panel, 1));
@@ -63,13 +66,17 @@
   }
 }
 
+.setting-container__dropdown[open], .setting-container__dropdown:hover {
+  opacity: 1;
+}
+
 .setting-container__dropdown[open] .setting-container__toggle-button::part(icon), .setting-container__toggle-button:hover::part(icon) {
   color: rgb(var(--zn-primary));
   cursor: pointer;
-  transition-duration: 0.8s;
+  transition-duration: 0.9s;
   transition-property: rotate, color;
-  rotate: 480deg;
-  transition-timing-function: ease-out;
+  rotate: 380deg;
+  transition-timing-function: ease-in-out;
 }
 
 zn-button {

package/src/components/style/style.component.ts

@@ -20,6 +20,7 @@ export default class ZnStyle extends ZincElement {
   @property({type: Boolean}) primary = false;
   @property({type: Boolean}) accent = false;
   @property({type: Boolean}) center = false;
+  @property() font = '';
   @property() width = '';
   @property() height = '';
   @property() pad = '';
@@ -57,6 +58,12 @@ export default class ZnStyle extends ZincElement {
       this.classList.toggle('flex-jc', true);
     }
 
+    if (this.font) {
+      if (this.font === 'mono') {
+        this.classList.toggle('zn-mono', true);
+      }
+    }
+
     if (this.width === "f") {
       this.classList.toggle('w-full', true);
     }
@@ -158,7 +165,6 @@ export default class ZnStyle extends ZincElement {
       }
     }
 
-
     this.style.display = display;
   }