@kupola/kupola 1.5.4 → 1.6.0

package/js/datepicker.js

@@ -1,6 +1,6 @@
 import { globalEvents } from './global-events.js';
 import { kupolaInitializer } from './initializer.js';
-import { getUiConfig } from './kupola-config.js';
+import { getUiConfig, getZIndexConfig } from './kupola-config.js';
 
 class Datepicker {
   constructor(element, options = {}) {
@@ -249,9 +249,13 @@ class Datepicker {
     this._originalTop = this.calendarEl.style.top;
     this._originalLeft = this.calendarEl.style.left;
     this._originalWidth = this.calendarEl.style.width;
+    this._originalTransform = this.calendarEl.style.transform;
+    this._originalZIndex = this.calendarEl.style.zIndex;
 
+    const zIndex = getZIndexConfig().datepicker;
     this.calendarEl.style.position = 'fixed';
-    this.calendarEl.style.zIndex = '9999';
+    this.calendarEl.style.zIndex = zIndex;
+    this.calendarEl.style.transform = 'translateZ(0)';
     document.body.appendChild(this.calendarEl);
   }
 
@@ -262,7 +266,8 @@ class Datepicker {
     this.calendarEl.style.top = this._originalTop || '';
     this.calendarEl.style.left = this._originalLeft || '';
     this.calendarEl.style.width = this._originalWidth || '';
-    this.calendarEl.style.zIndex = '';
+    this.calendarEl.style.zIndex = this._originalZIndex || '';
+    this.calendarEl.style.transform = this._originalTransform || '';
     this._originalParent = null;
   }
 

package/js/dropdown.js

@@ -1,6 +1,6 @@
 import { globalEvents } from './global-events.js';
 import { kupolaInitializer } from './initializer.js';
-import { getUiConfig } from './kupola-config.js';
+import { getUiConfig, getZIndexConfig } from './kupola-config.js';
 
 class Dropdown {
   constructor(element, options = {}) {
@@ -48,13 +48,19 @@ class Dropdown {
 
     // Item click handler
     this._itemClickHandler = (e) => {
+      e.stopPropagation();
       const item = e.currentTarget;
       if (item.classList.contains('is-disabled') || item.classList.contains('ds-dropdown__divider')) {return;}
 
+      this.menu.querySelectorAll('.ds-dropdown__item').forEach(i => i.classList.remove('is-selected'));
+      item.classList.add('is-selected');
+
       if (this.triggerText && !item.hasAttribute('data-no-update-trigger')) {
         this.triggerText.textContent = item.textContent.trim();
       }
 
+      this.element.setAttribute('data-value', item.getAttribute('data-value') || '');
+
       if (this.onSelect) {
         this.onSelect({ item, value: item.getAttribute('data-value'), text: item.textContent.trim() });
       }
@@ -296,9 +302,13 @@ class Dropdown {
     this._originalBottom = this.menu.style.bottom;
     this._originalMarginBottom = this.menu.style.marginBottom;
     this._originalWidth = this.menu.style.width;
+    this._originalTransform = this.menu.style.transform;
+    this._originalZIndex = this.menu.style.zIndex;
 
+    const zIndex = getZIndexConfig().dropdown;
     this.menu.style.position = 'fixed';
-    this.menu.style.zIndex = '9999';
+    this.menu.style.zIndex = zIndex;
+    this.menu.style.transform = 'translateZ(0)';
     document.body.appendChild(this.menu);
   }
 
@@ -312,7 +322,8 @@ class Dropdown {
     this.menu.style.bottom = this._originalBottom || '';
     this.menu.style.marginBottom = this._originalMarginBottom || '';
     this.menu.style.width = this._originalWidth || '';
-    this.menu.style.zIndex = '';
+    this.menu.style.zIndex = this._originalZIndex || '';
+    this.menu.style.transform = this._originalTransform || '';
     this._originalParent = null;
   }
 

package/js/kupola-config.js

@@ -17,6 +17,16 @@ const config = {
     headers: {},
     withCredentials: false,
   },
+  zIndex: {
+    modal: 1000,
+    dropdown: 2000,
+    tooltip: 2100,
+    popover: 2200,
+    datepicker: 2300,
+    message: 3000,
+    notification: 3100,
+    loading: 5000,
+  },
   ui: {
     defaultSize: 'md',
     modal: {
@@ -117,6 +127,10 @@ export function getUiConfig() {
   return config.ui;
 }
 
+export function getZIndexConfig() {
+  return config.zIndex;
+}
+
 export function getSecurityConfig() {
   return config.security;
 }

package/js/message.js

@@ -1,4 +1,4 @@
-import { getMessageConfig } from './kupola-config.js';
+import { getMessageConfig, getZIndexConfig } from './kupola-config.js';
 
 const Message = {
   normal: function (message, options = {}) {
@@ -42,6 +42,9 @@ const Message = {
     if (!container) {
       container = document.createElement('div');
       container.className = `ds-message ds-message--${position}`;
+      const zIndex = getZIndexConfig().message;
+      container.style.zIndex = zIndex;
+      container.style.transform = 'translateZ(0)';
       document.body.appendChild(container);
     }
 
@@ -72,4 +75,4 @@ const Message = {
 
 function initMessages() {}
 
-export { Message, initMessages };
+export { Message, initMessages };

package/js/notification.js

@@ -1,4 +1,4 @@
-import { getNotificationConfig } from './kupola-config.js';
+import { getNotificationConfig, getZIndexConfig } from './kupola-config.js';
 
 const Notification = {
   normal: function (options) {
@@ -48,6 +48,9 @@ const Notification = {
     if (!container) {
       container = document.createElement('div');
       container.className = `ds-notification ds-notification--${position}`;
+      const zIndex = getZIndexConfig().notification;
+      container.style.zIndex = zIndex;
+      container.style.transform = 'translateZ(0)';
       document.body.appendChild(container);
     }
 
@@ -75,4 +78,4 @@ const Notification = {
 
 function initNotifications() {}
 
-export { Notification, initNotifications };
+export { Notification, initNotifications };

package/js/select.js

@@ -1,5 +1,6 @@
 import { globalEvents } from './global-events.js';
 import { kupolaInitializer } from './initializer.js';
+import { getZIndexConfig } from './kupola-config.js';
 
 class Select {
   constructor(element, options = {}) {
@@ -74,6 +75,7 @@ class Select {
 
     // Option click handler
     this._optionClickHandler = (e) => {
+      e.stopPropagation();
       const option = e.currentTarget;
       if (option.classList.contains('is-disabled')) return;
       
@@ -495,9 +497,13 @@ class Select {
     this._originalLeft = this.optionsEl.style.left;
     this._originalRight = this.optionsEl.style.right;
     this._originalWidth = this.optionsEl.style.width;
+    this._originalTransform = this.optionsEl.style.transform;
+    this._originalZIndex = this.optionsEl.style.zIndex;
 
+    const zIndex = getZIndexConfig().dropdown;
     this.optionsEl.style.position = 'fixed';
-    this.optionsEl.style.zIndex = '9999';
+    this.optionsEl.style.zIndex = zIndex;
+    this.optionsEl.style.transform = 'translateZ(0)';
     document.body.appendChild(this.optionsEl);
   }
 
@@ -509,7 +515,8 @@ class Select {
     this.optionsEl.style.left = this._originalLeft || '';
     this.optionsEl.style.right = this._originalRight || '';
     this.optionsEl.style.width = this._originalWidth || '';
-    this.optionsEl.style.zIndex = '';
+    this.optionsEl.style.zIndex = this._originalZIndex || '';
+    this.optionsEl.style.transform = this._originalTransform || '';
     this._originalParent = null;
   }
 

package/js/tooltip.js

@@ -1,5 +1,5 @@
 import { kupolaInitializer } from './initializer.js';
-import { getUiConfig } from './kupola-config.js';
+import { getUiConfig, getZIndexConfig } from './kupola-config.js';
 
 class Tooltip {
   constructor(element, options = {}) {
@@ -118,6 +118,10 @@ class Tooltip {
     this.tooltipEl = document.createElement('div');
     this.tooltipEl.className = `ds-tooltip ds-tooltip--${this.position} ds-tooltip--${this.theme}`;
 
+    const zIndex = getZIndexConfig().tooltip;
+    this.tooltipEl.style.zIndex = zIndex;
+    this.tooltipEl.style.transform = 'translateZ(0)';
+
     if (this.html) {
       this.tooltipEl.innerHTML = text;
     } else {
@@ -346,4 +350,4 @@ function cleanupTooltip(element) {
 
 export { Tooltip, initTooltip, initTooltips, cleanupTooltip };
 
-kupolaInitializer.register('tooltip', initTooltip, cleanupTooltip);
+kupolaInitializer.register('tooltip', initTooltip, cleanupTooltip);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupola/kupola",
-  "version": "1.5.4",
+  "version": "1.6.0",
   "description": "A lightweight UI toolkit for any web project. No heavy frontend frameworks required.",
   "main": "dist/kupola.cjs.js",
   "module": "dist/kupola.esm.js",