@kubex/zinc 1.0.8 → 1.0.9

package/docs/pages/components/button.md

@@ -34,6 +34,20 @@ The `auto-click` attribute can be added to a button to make it automatically cli
     color="transparent"
   ></zn-button>
 </zn-button auto-click>
+
+<br>
+<br>
+
+<zn-button color="success" auto-click auto-click-delay="10000" loading-text="Accepting">
+  Test Auto Button
+  <zn-style slot="cancel" margin="l">
+    <zn-button
+      icon="call_end"
+      icon-size="18"
+      type="button"
+      color="error"
+    ></zn-button></zn-style>
+</zn-button>
 ```
 
 ### Variants

package/package.json

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

package/scss/themes/_light.scss

@@ -537,5 +537,5 @@
   --zn-z-index-dropdown: 900;
   --zn-z-index-toast: 950;
   --zn-z-index-tooltip: 1000;
-  --zn-z-index-editor-action: 100000;
+  --zn-z-index-editor-action: 1000000;
 }

package/src/components/button/button.component.ts

@@ -361,26 +361,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
           ${this.content}
         </slot>
         ${this.iconPosition === 'right' ? icon : ''}
-        ${this.loading ? html`
-          <div class="button--loading-container">
-            <span
-              class=${classMap({
-                'button--loading-text-bottom': true,
-                'button--loading-text-bottom-transparent': this.color === 'transparent',
-                [`button--loading-text-bottom-${this.loadingTextPosition}`]: !!this.loadingTextPosition,
-              })}>
-              ${this.loadingText}<span class="loading-countdown"></span>
-            </span>
-            <span
-              class=${classMap({
-                'button--loading-text-top': true,
-                'button--loading-text-top-transparent': this.color === 'transparent',
-                [`button--loading-text-top-${this.loadingTextPosition}`]: !!this.loadingTextPosition,
-              })}>
-              ${this.loadingText}<span class="loading-countdown"></span>
-            </span>
-          </div>
-        ` : null}
+        ${this._getLoadingContainer()}
       </${tag}>`;
 
     let content = this.autoClick ? html`
@@ -401,4 +382,15 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
 
     return content;
   }
+
+  private _getLoadingContainer() {
+    return html`
+      ${this.loading ? html`
+        <div class="button--loading-container">
+            <span class="button--loading-text">
+              ${this.loadingText}<span class="loading-countdown"></span>
+            </span>
+        </div>
+      ` : null}`;
+  }
 }

package/src/components/button/button.scss

@@ -312,8 +312,6 @@
 }
 
 .button--loading-bg {
-  background-color: #e0e0e0;
-
   &-transparent {
     background-color: transparent;
   }
@@ -347,7 +345,8 @@
     pointer-events: none;
   }
 
-  &-text-bottom, &-text-top {
+  &-text {
+    z-index: 5;
     width: 100%;
     height: 100%;
     display: flex;
@@ -357,9 +356,8 @@
     font-weight: inherit;
     user-select: none;
     position: absolute;
-    top: 0;
-    left: 0;
     pointer-events: none;
+    color: inherit;
 
     .loading-countdown {
       margin-left: 3px;
@@ -375,25 +373,6 @@
       padding-inline-end: 7px;
     }
   }
-
-  &-text-bottom {
-    z-index: 2;
-    color: rgba(var(--btn-color), .85);
-
-    &-transparent {
-      color: inherit;
-    }
-  }
-
-  &-text-top {
-    z-index: 3;
-    color: inherit;
-    /* Animate the reveal from left to right using a mask */
-    mask-image: linear-gradient(90deg, #000 0%, #000 100%);
-    mask-size: 0 100%;
-    mask-repeat: no-repeat;
-    animation: loading-text-reveal var(--loading-duration, 2s) linear forwards;
-  }
 }
 
 .button--relative-wrapper {
@@ -412,15 +391,6 @@
   }
 }
 
-@keyframes loading-text-reveal {
-  from {
-    mask-size: 0 100%;
-  }
-  to {
-    mask-size: 100% 100%;
-  }
-}
-
 :host([vertical-align="center"]) {
   align-self: center;
 }

package/src/components/content-block/content-block.scss

@@ -72,3 +72,57 @@ zn-panel:not(.content-block--short) zn-header::part(header-description) {
 .hidden {
   display: none;
 }
+
+li[data-list="ordered"] {
+  counter-increment: list-0 1;
+}
+
+@supports (counter-set:none) {
+  li[data-list] {
+    counter-set: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0;
+  }
+}
+
+li[data-list=bullet] > .ql-ui:before {
+  content: "•";
+}
+
+li[data-list=checked] > .ql-ui:before {
+  content: "☑";
+}
+
+li[data-list=unchecked] > .ql-ui:before {
+  content: "☐";
+}
+
+li[data-list="ordered"] > .ql-ui::before {
+  content: counter(list-0) ". ";
+}
+
+ol {
+  padding: 0;
+  margin: 0;
+}
+
+li[data-list=checked] > .ql-ui, li[data-list=unchecked] > .ql-ui {
+  color: #777;
+}
+
+.ql-ui {
+  position: absolute;
+}
+
+li {
+  list-style-type: none;
+  padding-left: 1em;
+  position: relative;
+}
+
+li > .ql-ui::before {
+  display: inline-block;
+  margin-left: -1.5em;
+  margin-right: 0.3em;
+  text-align: right;
+  white-space: nowrap;
+  width: 1.2em;
+}

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

@@ -90,6 +90,8 @@ interface HeaderConfig {
   default?: boolean;
   sortable?: boolean;
   filterable?: boolean;
+  hideHeader?: boolean;
+  hideColumn?: boolean;
 }
 
 interface DataRequest {
@@ -427,6 +429,13 @@ export default class ZnDataTable extends ZincElement {
         }
       });
 
+      // remove empty groups
+      Object.keys(groupedRows).forEach((groupKey) => {
+        if (groupedRows[groupKey].length === 0) {
+          delete groupedRows[groupKey];
+        }
+      });
+
       // render a table for each group
       return html`
         <zn-sp flush>
@@ -449,7 +458,10 @@ export default class ZnDataTable extends ZincElement {
   }
 
   public renderTableData(data: any) {
-    const filteredHeaders = Object.values(this.headers).filter((header) => {
+    const filteredHeaders = Object.values(this.headers).filter((header: HeaderConfig) => {
+      if (header.hideHeader || header.hideColumn) {
+        return false;
+      }
       return !Object.values(this.hiddenColumns).includes(header.key);
     });
 
@@ -608,7 +620,7 @@ export default class ZnDataTable extends ZincElement {
       || this.hasSlotController.test(ActionSlots.modify.valueOf())
       || this.hasSlotController.test(ActionSlots.create.valueOf());
 
-    if(!hasSlots) {
+    if (!hasSlots) {
       return [];
     }
 
@@ -909,6 +921,13 @@ export default class ZnDataTable extends ZincElement {
   }
 
   private renderCellBody(index: number, value: Cell) {
+    const filteredHeaders = Object.values(this.headers).filter((header: HeaderConfig) => {
+      if (header.hideHeader || header.hideColumn) {
+        return false;
+      }
+      return !Object.values(this.hiddenColumns).includes(header.key);
+    });
+
     const headerKeys: string[] = Object.keys(this.headers).filter(
       (key) => !Object.values(this.hiddenColumns).includes(key)
     );
@@ -920,7 +939,7 @@ export default class ZnDataTable extends ZincElement {
         class="${classMap({
           'table__cell': true,
           'table__cell--wide': headerKey === this.wideColumn,
-          'table__cell--last': headerKey === headerKeys[headerKeys.length - 1],
+          'table__cell--last': index === filteredHeaders.length - 1,
         })}">
         <div>${this.renderCell(value)}</div>
       </td>`;

package/src/components/editor/editor.scss

@@ -65,7 +65,6 @@
     padding: 0 var(--zn-spacing-medium);
 
     img {
-      max-width: 40%;
       height: auto;
     }
   }

package/src/components/panel/panel.component.ts

@@ -31,6 +31,7 @@ export default class ZnPanel extends ZincElement {
   @property() icon: string;
   @property() description: string;
   @property({type: Boolean}) tabbed: boolean;
+  @property({attribute: 'header-underline', type: Boolean}) underlineHeader: boolean;
   @property({type: Boolean}) cosmic: boolean;
   @property({type: Boolean}) flush: boolean;
   @property({attribute: 'flush-x', type: Boolean}) flushX: boolean;
@@ -94,7 +95,10 @@ export default class ZnPanel extends ZincElement {
 
         <div class="panel__inner">
           ${hasHeader ? html`
-            <zn-header class="panel__header"
+            <zn-header class="${classMap({
+              "panel__header": true,
+              "panel__header--underline": this.underlineHeader,
+            })}"
                        icon="${this.icon}"
                        caption="${this.caption}"
                        description="${ifDefined(this.description)}"

package/src/components/panel/panel.scss

@@ -40,6 +40,10 @@
       border-bottom: 0;
     }
 
+    &--underline {
+      border-bottom: 1px solid rgb(var(--zn-border-color));
+    }
+
     &::part(content) {
       padding: 0;
     }

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

@@ -1,5 +1,6 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {deepQuerySelectorAll} from "../../utilities/query";
 import {property, state} from "lit/decorators.js";
 import {Store} from "../../internal/storage";
 import {type ZnChangeEvent} from "../../events/zn-change";
@@ -7,7 +8,6 @@ import ZincElement from '../../internal/zinc-element';
 import type ZnCheckbox from "../checkbox";
 
 import styles from './settings-container.scss';
-import {deepQuerySelectorAll} from "../../utilities/query";
 
 interface SettingsContainerFilter {
   attribute: string;

package/src/components/tabs/tabs.component.ts

@@ -295,7 +295,6 @@ export default class ZnTabs extends ZincElement {
     let hasActive = false;
     this._tabs.forEach(tab => {
 
-
       if (tab.hasAttribute('tab-uri') && this._knownUri.has(tab.getAttribute('tab-uri')!)) {
         tab.setAttribute('tab', this._knownUri.get(tab.getAttribute('tab-uri')!)!);
       }
@@ -407,19 +406,38 @@ export default class ZnTabs extends ZincElement {
   }
 
   removeTabAndPanel(tabId: string) {
-    if (this._panels.has(tabId)) {
-      this._panels.delete(tabId);
+    if (this._current === tabId) {
+      this.setActiveTab('', true, false);
     }
 
     for (const tab of this._tabs) {
       if (tab.getAttribute('tab') === tabId) {
-        tab.remove();
+
+        if (tab.hasAttribute('tab-uri')) {
+          const tabUri = tab.getAttribute('tab-uri')!;
+          if (this._knownUri.has(tabUri)) {
+            this._knownUri.delete(tabUri);
+          }
+        }
+
+        //tab.remove();
+        tab.parentElement?.removeChild(tab)
         this._tabs.splice(this._tabs.indexOf(tab), 1);
       }
     }
 
-    if (this._current === tabId) {
-      this.setActiveTab('', true, false);
+    if (this._panels.has(tabId)) {
+      const panel = this._panels.get(tabId);
+      if (panel instanceof HTMLElement) {
+        panel.remove();
+      } else if (panel instanceof Array) {
+        panel.forEach((item) => {
+          if (item instanceof HTMLElement) {
+            item.remove();
+          }
+        })
+      }
+      this._panels.delete(tabId);
     }
   }
 

package/src/internal/form.ts

@@ -235,12 +235,50 @@ export class FormControlController implements ReactiveController {
       name.length > 0 &&
       typeof value !== 'undefined'
     ) {
-      if (Array.isArray(value)) {
+      const appendPrimitive = (val: string | number | boolean) => {
+        event.formData.append(name, val.toString());
+      };
+      const appendFile = (file: Blob, filename?: string) => {
+        // If a filename is provided or it's a File (has name), FormData will use it properly
+        const maybeFile = file as unknown as File;
+        const fname = filename ?? (typeof maybeFile.name === 'string' ? maybeFile.name : undefined);
+        // Overloads: append(name, blob, filename?)
+        if (typeof fname === 'string') {
+          event.formData.append(name, file, fname);
+        } else {
+          event.formData.append(name, file);
+        }
+      };
+
+      const isFileList = (val: unknown): val is FileList => typeof FileList !== 'undefined' && val instanceof FileList;
+      const isBlob = (val: unknown): val is Blob => typeof Blob !== 'undefined' && val instanceof Blob;
+
+      if (isFileList(value)) {
+        // Match native input[type=file] behavior: append each File; if empty, append nothing
+        if (value.length > 0) {
+          for (let i = 0; i < value.length; i++) {
+            const f = value.item(i);
+            if (f) appendFile(f, f.name);
+          }
+        }
+      } else if (isBlob(value)) {
+        appendFile(value, (value as unknown as File).name);
+      } else if (Array.isArray(value)) {
         (value as unknown[]).forEach(val => {
-          event.formData.append(name, (val as string | number | boolean).toString());
+          if (isBlob(val)) {
+            appendFile(val as Blob, (val as unknown as File).name);
+          } else if (isFileList(val)) {
+            const fl = val as FileList;
+            for (let i = 0; i < fl.length; i++) {
+              const f = fl.item(i);
+              if (f) appendFile(f, f.name);
+            }
+          } else {
+            appendPrimitive(val as string | number | boolean);
+          }
         });
       } else {
-        event.formData.append(name, (value as string | number | boolean).toString());
+        appendPrimitive(value as string | number | boolean);
       }
 
       this.host.dispatchEvent(new CustomEvent('zn-formdata', {bubbles: true, composed: true}));