@kubex/zinc 1.0.8 → 1.0.10

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;
@@ -202,25 +202,31 @@ export default class ZnSettingsContainer extends ZincElement {
         </div>
         <zn-dropdown placement="${placement}" class="${classMap({
           'setting-container__dropdown': true,
-          'setting-container__dropdown--top-end': this.position === 'top-end',
-          'setting-container__dropdown--top-start': this.position === 'top-start',
-          'setting-container__dropdown--bottom-end': this.position === 'bottom-end',
-          'setting-container__dropdown--bottom-start': this.position === 'bottom-start',
+          [`setting-container__dropdown--${this.position}`]: true,
         })}">
           <zn-icon class="setting-container__toggle-button" slot="trigger" size="24" src="settings" round></zn-icon>
-          <div class="settings-container__dropdown-content">
-            <slot name="filter" style="display: none;" @slotchange="${this.handleFiltersSlotChange}"></slot>
-            ${this.filters.map(filter => html`
-              <zn-checkbox class="settings-container__dropdown-item"
-                           data-attribute="${filter.attribute}"
-                           ?checked="${filter.checked}"
-                           @zn-change="${this.updateFilter}">
-                ${filter.label}
-              </zn-checkbox>
-            `)}
-          </div>
+          ${this.getDropdownContent()}
         </zn-dropdown>
       </div>
     `;
   }
+
+  private getDropdownContent() {
+    const hasDropdownContent = this.querySelector('[slot="dropdown-content"]');
+    if (hasDropdownContent) {
+      return html`
+        <slot name="dropdown-content"></slot>`;
+    }
+    return html`
+      <div class="settings-container__dropdown-content">
+        <slot name="filter" style="display: none;" @slotchange="${this.handleFiltersSlotChange}"></slot>
+        ${this.filters.map(filter => html`
+          <zn-checkbox class="settings-container__dropdown-item"
+                       data-attribute="${filter.attribute}"
+                       .checked=${filter.checked}
+                       @zn-change=${this.updateFilter}>
+            ${filter.label}
+          </zn-checkbox>`)}
+      </div>`;
+  }
 }

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

@@ -31,7 +31,6 @@
   padding: 4px;
   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;
@@ -70,13 +69,15 @@
   opacity: 1;
 }
 
+.setting-container__toggle-button::part(icon) {
+  rotate: 0deg;
+  transition: rotate 0.9s ease-in-out, color 0.9s ease-in-out;
+}
+
 .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.9s;
-  transition-property: rotate, color;
   rotate: 380deg;
-  transition-timing-function: ease-in-out;
 }
 
 zn-button {

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/components/tooltip/tooltip.component.ts

@@ -191,14 +191,14 @@ export default class ZnTooltip extends ZincElement {
       <zn-popup
         part="base"
         exportparts="popup:base__popup,arrow:base__arrow"
-        class=${classMap({
+        class="${classMap({
           tooltip: true,
           'tooltip--open': this.open
-        })}
-        placement=${this.placement}
-        distance=${this.distance}
-        skidding=${this.skidding}
-        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        })}"
+        placement="${this.placement}"
+        distance="${this.distance}"
+        skidding="${this.skidding}"
+        strategy="${this.hoist ? 'fixed' : 'absolute'}"
         flip
         shift
         arrow
@@ -206,7 +206,7 @@ export default class ZnTooltip extends ZincElement {
         <slot slot="anchor"></slot>
         <div part="body" id="tooltip" class="tooltip__body"
              role="tooltip"
-             aria-live=${this.open ? 'polite' : 'off'}
+             aria-live="${this.open ? 'polite' : 'off'}"
              aria-label="tooltip">
           <slot name="content">${this.content}</slot>
         </div>

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}));