@kupola/kupola 1.4.2 → 1.4.4

package/js/validation.js

@@ -518,7 +518,7 @@ if (!window.__kupolaValidationInitialized) {
         let timeout;
         return (...args) => {
           clearTimeout(timeout);
-          timeout = setTimeout(() => func.apply(this, args), wait);
+          timeout = setTimeout(() => func(...args), wait);
         };
       };
 
@@ -549,9 +549,4 @@ if (!window.__kupolaValidationInitialized) {
 });
 }
 
-export { KupolaValidator, validator };
-
-if (typeof window !== 'undefined') {
-  window.KupolaValidator = KupolaValidator;
-  window.kupolaValidator = validator;
-}
+export { KupolaValidator, validator };

package/js/virtual-list.js

@@ -1,3 +1,5 @@
+import { kupolaInitializer } from './initializer.js';
+
 class VirtualList {
   constructor(element, options = {}) {
     this.element = element;
@@ -241,32 +243,7 @@ class VirtualList {
       const key = item[this.keyField] || actualIndex;
       const isSelected = this.selectedKey === key;
       const itemSize = this.getItemSize(actualIndex);
-      const position = currentPosition;
-      
-      if (isHorizontal) {
-        html += `
-          <div 
-            class="ds-virtual-list__item${isSelected ? ' is-selected' : ''}" 
-            style="position: absolute; top: 0; left: ${position}px; width: ${itemSize}px; height: 100%;"
-            data-index="${actualIndex}"
-            data-key="${key}"
-          >
-            ${this.renderItem(item, actualIndex)}
-          </div>
-        `;
-      } else {
-        html += `
-          <div 
-            class="ds-virtual-list__item${isSelected ? ' is-selected' : ''}" 
-            style="position: absolute; top: ${position}px; left: 0; right: 0; height: ${itemSize}px;"
-            data-index="${actualIndex}"
-            data-key="${key}"
-          >
-            ${this.renderItem(item, actualIndex)}
-          </div>
-        `;
-      }
-      
+      html += this._buildItemHtml(item, actualIndex, key, isSelected, itemSize, currentPosition, isHorizontal);
       currentPosition += itemSize;
     });
     
@@ -281,6 +258,15 @@ class VirtualList {
     });
   }
 
+  _buildItemHtml(item, index, key, isSelected, size, position, isHorizontal) {
+    const selectedClass = isSelected ? ' is-selected' : '';
+    const content = this.renderItem(item, index);
+    if (isHorizontal) {
+      return `<div class="ds-virtual-list__item${selectedClass}" style="position: absolute; top: 0; left: ${position}px; width: ${size}px; height: 100%;" data-index="${index}" data-key="${key}">${content}</div>`;
+    }
+    return `<div class="ds-virtual-list__item${selectedClass}" style="position: absolute; top: ${position}px; left: 0; right: 0; height: ${size}px;" data-index="${index}" data-key="${key}">${content}</div>`;
+  }
+
   updateDynamicHeights() {
     if (this.isUpdating) return;
     
@@ -583,15 +569,4 @@ function initVirtualLists() {
 
 export { VirtualList, initVirtualLists, initVirtualList, cleanupVirtualList, createVirtualList, generateMockVirtualListData };
 
-if (typeof window !== 'undefined') {
-  window.VirtualList = VirtualList;
-  window.initVirtualList = initVirtualList;
-  window.cleanupVirtualList = cleanupVirtualList;
-  window.initVirtualLists = initVirtualLists;
-  window.createVirtualList = createVirtualList;
-  window.generateMockVirtualListData = generateMockVirtualListData;
-  
-  if (window.kupolaInitializer) {
-    window.kupolaInitializer.register('virtual-list', initVirtualList, cleanupVirtualList);
-  }
-}
+kupolaInitializer.register('virtual-list', initVirtualList, cleanupVirtualList);

package/js/web-components.js

@@ -277,12 +277,3 @@ export {
   KupolaDrawerElement,
   KupolaModalElement
 };
-
-if (typeof window !== 'undefined') {
-  window.registerWebComponents = registerWebComponents;
-  window.KupolaDropdownElement = KupolaDropdownElement;
-  window.KupolaTooltipElement = KupolaTooltipElement;
-  window.KupolaCollapseElement = KupolaCollapseElement;
-  window.KupolaDrawerElement = KupolaDrawerElement;
-  window.KupolaModalElement = KupolaModalElement;
-}

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@kupola/kupola",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "A lightweight UI toolkit for any web project. No heavy frontend frameworks required.",
   "main": "dist/kupola.cjs.js",
   "module": "dist/kupola.esm.js",
   "types": "dist/types/kupola.d.ts",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "./js/icons.js",
+    "./js/theme-standalone.js",
+    "*.css"
+  ],
   "engines": {
     "node": ">=16.0.0"
   },
@@ -46,13 +50,14 @@
       "import": "./adapters/navios-http.js",
       "types": "./adapters/navios-http.d.ts"
     },
-    "./kupola.css": "./dist/css/kupola.css",
-    "./kupola.min.css": "./dist/css/kupola.min.css",
+    "./kupola.css": "./dist/kupola.css",
+    "./kupola.min.css": "./dist/kupola.min.css",
     "./kupola.umd.js": "./dist/kupola.umd.js",
     "./kupola.min.js": "./dist/kupola.min.js",
     "./dist/css/kupola.css": "./dist/css/kupola.css",
     "./dist/css/*": "./dist/css/*",
-    "./dist/icons/*": "./dist/icons/*"
+    "./dist/icons/*": "./dist/icons/*",
+    "./version.json": "./version.json"
   },
   "scripts": {
     "dev": "vite",
@@ -106,7 +111,8 @@
     "plugins/",
     "adapters/",
     "types/",
-    "scripts/"
+    "scripts/",
+    "version.json"
   ],
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -117,7 +123,6 @@
     "prettier": "^3.2.5",
     "rollup": "^4.13.0",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-postcss": "^4.0.2",
     "vite": "^5.1.6"
   }
 }

package/scripts/build-css.cjs

@@ -18,7 +18,7 @@ const OUTPUT_DIR = path.resolve(__dirname, '..', 'dist');
 
 // Import order must match kupola.css @import order
 const IMPORT_ORDER = [
-  'colors_and_type.css',
+  'colors-and-type.css',
   'theme-light.css',
   'theme-dark.css',
   'brand-themes.css',
@@ -29,7 +29,8 @@ const IMPORT_ORDER = [
   'utilities.css',
   'responsive.css',
   'accessibility.css',
-  'animations.css'
+  'animations.css',
+  'table.css'
 ];
 
 function resolveImports(cssContent, basePath) {

package/types/kupola.d.ts

@@ -468,6 +468,18 @@ declare class KupolaUtils {
 
 declare const kupolaUtils: KupolaUtils;
 
+declare const stringUtils: KupolaUtils['string'];
+declare const arrayUtils: KupolaUtils['array'];
+declare const objectUtils: KupolaUtils['object'];
+declare const numberUtils: KupolaUtils['number'];
+declare const dateUtils: KupolaUtils['date'];
+declare const validatorUtils: KupolaUtils['validator'];
+declare const cryptoUtils: KupolaUtils['crypto'];
+declare const preloadUtils: KupolaUtils['preload'];
+
+declare function debounce<T extends (...args: unknown[]) => void>(func: T, wait: number, options?: DebounceOptions): T;
+declare function throttle<T extends (...args: unknown[]) => void>(func: T, limit: number, options?: ThrottleOptions): T;
+
 declare interface FormState {
   valid: boolean;
   errors: Record<string, string>;
@@ -681,14 +693,14 @@ declare class KupolaModalElement extends HTMLElement {
   close(): void;
 }
 
-declare function createModal(options?: Record<string, unknown>): any;
-declare function confirmModal(options: Record<string, unknown> | string): any;
-declare function alertModal(options: Record<string, unknown> | string): any;
+declare function createModal(options?: Record<string, unknown>): Modal;
+declare function confirmModal(options: Record<string, unknown> | string): Modal;
+declare function alertModal(options: Record<string, unknown> | string): Modal;
 
 declare function cleanupAllDropdowns(): void;
 declare function cleanupAllSlideCaptchas(): void;
 
-declare function ref<T = unknown>(initialValue?: T): { value: T; _subscribers: Set<Function> };
+declare function ref<T = unknown>(initialValue?: T): { value: T; _subscribers: Set<Function>; subscribe: (callback: Function) => { unsubscribe: () => void } };
 
 declare class Modal {
   constructor(element: HTMLElement, options?: Record<string, unknown>);
@@ -720,7 +732,7 @@ interface KupolaHttpResponse {
   statusText?: string;
   headers: Record<string, string>;
   url?: string;
-  json(): Promise<any>;
+  json(): Promise<unknown>;
   text(): Promise<string>;
 }
 
@@ -816,16 +828,16 @@ declare function clearCache(): void;
 // Table & Pagination Components
 // ============================================================
 
-interface KupolaTableColumn {
+interface KupolaTableColumn<T = Record<string, unknown>> {
   key: string;
   title: string;
   width?: string | number;
   minWidth?: string | number;
   align?: 'left' | 'center' | 'right';
   sortable?: boolean;
-  sorter?: (a: unknown, b: unknown, order?: string) => number;
+  sorter?: (a: T, b: T, order?: string) => number;
   fixed?: 'left' | 'right';
-  render?: (value: unknown, row: unknown, index?: number) => string | HTMLElement;
+  render?: (value: unknown, row: T, index?: number) => string | HTMLElement;
   editable?: boolean;
   editType?: string;
   editOptions?: Array<{ value: string; label: string }>;
@@ -842,8 +854,8 @@ interface KupolaTableVirtualScrollOptions {
   maxHeight?: string;
 }
 
-interface KupolaTableOptions {
-  columns: KupolaTableColumn[];
+interface KupolaTableOptions<T = Record<string, unknown>> {
+  columns: KupolaTableColumn<T>[];
   rowKey?: string;
   striped?: boolean;
   bordered?: boolean;
@@ -858,31 +870,31 @@ interface KupolaTableOptions {
   showExport?: boolean;
   showPageSize?: boolean;
   selection?: 'checkbox' | 'radio';
-  expandable?: (row: unknown) => string | HTMLElement;
+  expandable?: (row: T) => string | HTMLElement;
   editable?: boolean;
   resizable?: boolean;
   draggable?: boolean;
   multiSort?: boolean;
   tree?: KupolaTableTreeOptions;
   virtualScroll?: KupolaTableVirtualScrollOptions;
-  mergeCells?: (data: unknown[]) => Array<{ row: number; col: number; rowSpan: number; colSpan: number }>;
+  mergeCells?: (data: T[]) => Array<{ row: number; col: number; rowSpan: number; colSpan: number }>;
   onSort?: (sorts: Array<{ key: string; order: string }>) => void;
   onFilter?: (text: string) => void;
-  onRowClick?: (row: unknown, index: number, event: Event) => void;
+  onRowClick?: (row: T, index: number, event: Event) => void;
   onPageChange?: (page: number, pageSize: number) => void;
-  onSelect?: (selectedKeys: unknown[], selectedRows: unknown[]) => void;
+  onSelect?: (selectedKeys: unknown[], selectedRows: T[]) => void;
   onExpand?: (key: unknown, isExpanded: boolean) => void;
-  onEditSave?: (row: unknown, colKey: string, newValue: unknown, allData: unknown[]) => void;
-  onEditCancel?: (editingCell: unknown) => void;
+  onEditSave?: (row: T, colKey: string, newValue: unknown, allData: T[]) => void;
+  onEditCancel?: (editingCell: { row: T; colKey: string; value: unknown }) => void;
   onColumnResize?: (colKey: string, newWidth: number) => void;
-  onRowDragEnd?: (movedRow: unknown, fromIndex: number, toIndex: number, newData: unknown[]) => void;
+  onRowDragEnd?: (movedRow: T, fromIndex: number, toIndex: number, newData: T[]) => void;
 }
 
-declare class KupolaTable {
-  constructor(element: HTMLElement | string, options?: KupolaTableOptions);
-  setData(data: unknown[] | { value: unknown[] | null }): void;
+declare class KupolaTable<T = Record<string, unknown>> {
+  constructor(element: HTMLElement | string, options?: KupolaTableOptions<T>);
+  setData(data: T[] | { value: T[] | null }): void;
   setLoading(loading: boolean): void;
-  setColumns(columns: KupolaTableColumn[]): void;
+  setColumns(columns: KupolaTableColumn<T>[]): void;
   setPageSize(size: number): void;
   getSortState(): { key: string | null; order: string | null } | Array<{ key: string; order: string }>;
   getPage(): { current: number; pageSize: number; total: number };
@@ -894,11 +906,11 @@ declare class KupolaTable {
   selectRow(key: unknown): void;
   deselectRow(key: unknown): void;
   getSelectedKeys(): unknown[];
-  getSelectedRows(): unknown[];
+  getSelectedRows(): T[];
   destroy(): void;
 }
 
-declare function initTable(element: HTMLElement | string, options?: KupolaTableOptions): KupolaTable;
+declare function initTable<T = Record<string, unknown>>(element: HTMLElement | string, options?: KupolaTableOptions<T>): KupolaTable<T>;
 declare function initAllTables(): KupolaTable[];
 
 interface KupolaPaginationOptions {
@@ -1334,7 +1346,7 @@ declare module 'kupola' {
   export function cleanupAllDropdowns(): void;
   export function cleanupAllSlideCaptchas(): void;
 
-  export function ref<T = unknown>(initialValue?: T): { value: T; _subscribers: Set<Function> };
+  export function ref<T = unknown>(initialValue?: T): { value: T; _subscribers: Set<Function>; subscribe: (callback: Function) => { unsubscribe: () => void } };
 
   export class Modal {
     constructor(element: HTMLElement, options?: Record<string, unknown>);
@@ -1358,7 +1370,7 @@ declare module 'kupola' {
     statusText?: string;
     headers: Record<string, string>;
     url?: string;
-    json(): Promise<any>;
+    json(): Promise<unknown>;
     text(): Promise<string>;
   }
 
@@ -1454,4 +1466,8 @@ declare module 'kupola' {
   export { KupolaTable, KupolaTableColumn, KupolaTableOptions, KupolaPagination, KupolaPaginationOptions };
   export { initTable, initAllTables, initPagination };
 
+  // Utils (tree-shakeable namespace exports)
+  export { KupolaUtils, stringUtils, arrayUtils, objectUtils, numberUtils, dateUtils };
+  export { debounce, throttle, validatorUtils, cryptoUtils, preloadUtils };
+
 }

package/version.json

@@ -0,0 +1,10 @@
+{
+  "version": "1.4.3",
+  "name": "Kupola",
+  "description": "A lightweight, dependency-free declarative UI component system for any server-side rendered web application",
+  "author": "Kupola Team",
+  "license": "MIT",
+  "homepage": "https://github.com/kupola-cn/kupola",
+  "repository": "https://github.com/kupola-cn/kupola",
+  "changelog": "CHANGELOG.md"
+}

package/dist/css/kupola.min.css

@@ -1 +0,0 @@
-@import "../css/scaffold.css";@import "../css/colors_and_type.css";@import "../css/theme-light.css";@import "../css/brand-themes.css";@import "../css/components.css";@import "../css/components-ext.css";@import "../css/states.css";@import "../css/responsive.css";@import "../css/animations.css";@import "../css/accessibility.css";@import "../css/utilities.css";