@kupola/kupola 1.2.0 → 1.4.0

package/js/web-components.js

@@ -0,0 +1,288 @@
+/**
+ * Kupola Web Components — Custom Elements wrapper for core Kupola components.
+ *
+ * Usage:
+ *   import { registerWebComponents } from '@kupola/kupola';
+ *   registerWebComponents();
+ *
+ *   Then in HTML:
+ *   <k-dropdown>
+ *     <button slot="trigger">Open</button>
+ *     <a slot="item">Option A</a>
+ *     <a slot="item">Option B</a>
+ *   </k-dropdown>
+ *
+ *   <k-tooltip title="Hello!">
+ *     <button>Hover me</button>
+ *   </k-tooltip>
+ *
+ *   <k-collapse>
+ *     <k-collapse-item title="Section 1">Content 1</k-collapse-item>
+ *     <k-collapse-item title="Section 2">Content 2</k-collapse-item>
+ *   </k-collapse>
+ */
+
+let registered = false;
+
+/**
+ * <k-dropdown> — Wraps Kupola dropdown
+ * Slots: trigger (button), item (menu items)
+ */
+class KupolaDropdownElement extends HTMLElement {
+  static get observedAttributes() { return ['open']; }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  _render() {
+    const trigger = this.querySelector('[slot="trigger"]');
+    const items = this.querySelectorAll('[slot="item"]');
+
+    // Build dropdown DOM structure
+    const wrapper = document.createElement('div');
+    wrapper.className = 'ds-dropdown';
+    wrapper.setAttribute('data-dropdown', '');
+
+    if (trigger) {
+      trigger.setAttribute('class', (trigger.getAttribute('class') || '') + ' ds-dropdown__trigger');
+      wrapper.appendChild(trigger);
+    }
+
+    const menu = document.createElement('div');
+    menu.className = 'ds-dropdown__menu';
+    items.forEach(item => {
+      item.className = 'ds-dropdown__item';
+      menu.appendChild(item);
+    });
+    wrapper.appendChild(menu);
+
+    this.innerHTML = '';
+    this.appendChild(wrapper);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name === 'open') {
+      const menu = this.querySelector('.ds-dropdown__menu');
+      if (menu) menu.style.display = newVal !== null ? 'block' : '';
+    }
+  }
+}
+
+/**
+ * <k-tooltip title="text"> — Wraps Kupola tooltip
+ * Default slot: the trigger element
+ */
+class KupolaTooltipElement extends HTMLElement {
+  static get observedAttributes() { return ['title', 'position']; }
+
+  connectedCallback() {
+    const trigger = this.firstElementChild;
+    if (trigger) {
+      trigger.setAttribute('data-title', this.getAttribute('title') || '');
+      if (this.getAttribute('position')) {
+        trigger.setAttribute('data-tooltip-position', this.getAttribute('position'));
+      }
+    }
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name === 'title') {
+      const trigger = this.firstElementChild;
+      if (trigger) trigger.setAttribute('data-title', newVal || '');
+    }
+  }
+}
+
+/**
+ * <k-collapse> — Wraps Kupola collapse/accordion
+ * Children: <k-collapse-item title="...">content</k-collapse-item>
+ */
+class KupolaCollapseElement extends HTMLElement {
+  connectedCallback() {
+    this._render();
+  }
+
+  _render() {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'ds-collapse';
+    wrapper.setAttribute('data-collapse', '');
+
+    const items = this.querySelectorAll('k-collapse-item');
+    items.forEach(item => {
+      const title = item.getAttribute('title') || '';
+      const content = item.innerHTML;
+
+      const collapseItem = document.createElement('div');
+      collapseItem.className = 'ds-collapse__item';
+      collapseItem.innerHTML = `
+        <button class="ds-collapse__header">
+          <span>${title}</span>
+          <svg class="icon ds-collapse__chevron" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+        </button>
+        <div class="ds-collapse__body"><div class="ds-collapse__content">${content}</div></div>
+      `;
+      wrapper.appendChild(collapseItem);
+    });
+
+    this.innerHTML = '';
+    this.appendChild(wrapper);
+  }
+}
+
+/**
+ * <k-collapse-item title="..."> — Child of <k-collapse>
+ * Not registered as a standalone custom element, just a data container.
+ */
+class KupolaCollapseItemElement extends HTMLElement {
+  static get observedAttributes() { return ['title']; }
+  // Content is read by parent <k-collapse> during its connectedCallback
+}
+
+/**
+ * <k-drawer> — Wraps Kupola drawer
+ * Attributes: position (left|right|top|bottom), open
+ */
+class KupolaDrawerElement extends HTMLElement {
+  static get observedAttributes() { return ['position', 'open']; }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  _render() {
+    const position = this.getAttribute('position') || 'left';
+    const wrapper = document.createElement('div');
+    wrapper.className = `ds-drawer ds-drawer--${position}`;
+    wrapper.setAttribute('data-drawer', '');
+    wrapper.innerHTML = this.innerHTML;
+    this.innerHTML = '';
+    this.appendChild(wrapper);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name === 'open') {
+      const drawer = this.querySelector('.ds-drawer');
+      if (drawer) {
+        drawer.classList.toggle('is-open', newVal !== null);
+      }
+    }
+  }
+}
+
+/**
+ * <k-modal> — Wraps Kupola modal dialog
+ * Attributes: title, open
+ */
+class KupolaModalElement extends HTMLElement {
+  static get observedAttributes() { return ['title', 'open']; }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  _render() {
+    const title = this.getAttribute('title') || '';
+    const wrapper = document.createElement('div');
+    wrapper.className = 'ds-backdrop';
+    wrapper.style.display = 'none';
+    wrapper.innerHTML = `
+      <div class="ds-dialog">
+        <div class="ds-dialog__head">
+          <span class="ds-dialog__title">${title}</span>
+          <button class="ds-dialog__close" aria-label="Close">
+            <svg class="icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+        <div class="ds-dialog__body"></div>
+        <div class="ds-dialog__foot"></div>
+      </div>
+    `;
+
+    // Move slotted content into dialog body
+    const body = wrapper.querySelector('.ds-dialog__body');
+    const content = this.querySelector('[slot="body"]');
+    if (content) {
+      body.appendChild(content);
+    }
+
+    // Move footer content
+    const foot = wrapper.querySelector('.ds-dialog__foot');
+    const footer = this.querySelector('[slot="footer"]');
+    if (footer) {
+      foot.appendChild(footer);
+    }
+
+    // Close button handler
+    const closeBtn = wrapper.querySelector('.ds-dialog__close');
+    if (closeBtn) {
+      closeBtn.addEventListener('click', () => this.close());
+    }
+    // Backdrop click handler
+    wrapper.addEventListener('click', (e) => {
+      if (e.target === wrapper) this.close();
+    });
+
+    this.innerHTML = '';
+    this.appendChild(wrapper);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (name === 'open') {
+      const backdrop = this.querySelector('.ds-backdrop');
+      if (backdrop) {
+        backdrop.style.display = newVal !== null ? 'flex' : 'none';
+      }
+    }
+  }
+
+  open() {
+    this.setAttribute('open', '');
+  }
+
+  close() {
+    this.removeAttribute('open');
+  }
+}
+
+/**
+ * Register all Kupola Web Components.
+ * Safe to call multiple times — will only register once.
+ */
+export function registerWebComponents() {
+  if (registered || typeof customElements === 'undefined') return;
+  registered = true;
+
+  const components = [
+    ['k-dropdown', KupolaDropdownElement],
+    ['k-tooltip', KupolaTooltipElement],
+    ['k-collapse', KupolaCollapseElement],
+    ['k-collapse-item', KupolaCollapseItemElement],
+    ['k-drawer', KupolaDrawerElement],
+    ['k-modal', KupolaModalElement]
+  ];
+
+  for (const [tag, cls] of components) {
+    if (!customElements.get(tag)) {
+      customElements.define(tag, cls);
+    }
+  }
+}
+
+export {
+  KupolaDropdownElement,
+  KupolaTooltipElement,
+  KupolaCollapseElement,
+  KupolaCollapseItemElement,
+  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,105 +1,119 @@
 {
   "name": "@kupola/kupola",
-  "version": "1.2.0",
-  "description": "Lightweight UI toolkit for any web project. No heavy frontend frameworks required. Works seamlessly with Flask, Django, Gin, Spring Boot, ASP.NET Core, Express, Ruby on Rails, and any backend framework that outputs HTML.",
-  "type": "module",
+  "version": "1.4.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",
   "types": "dist/types/kupola.d.ts",
+  "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=16.0.0"
+  },
   "exports": {
     ".": {
       "import": "./dist/kupola.esm.js",
       "require": "./dist/kupola.cjs.js",
       "types": "./dist/types/kupola.d.ts"
     },
-    "./css": {
-      "import": "./dist/css/kupola.css",
-      "require": "./dist/css/kupola.css"
+    "./depends": {
+      "import": "./js/depends.js",
+      "types": "./dist/types/kupola.d.ts"
+    },
+    "./component": {
+      "import": "./js/kupola-core.js"
+    },
+    "./data-bind": {
+      "import": "./js/data-bind.js"
+    },
+    "./theme": {
+      "import": "./js/theme.js"
+    },
+    "./icons": {
+      "import": "./js/icons.js"
+    },
+    "./validation": {
+      "import": "./js/validation.js"
+    },
+    "./vite": {
+      "import": "./plugins/vite-plugin-kupola.js"
+    },
+    "./adapters/axios": {
+      "import": "./adapters/axios.js",
+      "types": "./adapters/axios.d.ts"
     },
-    "./icons": "./icons/",
-    "./js/": "./js/",
-    "./css/": "./css/"
+    "./adapters/navios-http": {
+      "import": "./adapters/navios-http.js",
+      "types": "./adapters/navios-http.d.ts"
+    },
+    "./dist/css/kupola.css": "./dist/css/kupola.css",
+    "./dist/css/*": "./dist/css/*",
+    "./dist/icons/*": "./dist/icons/*"
   },
   "scripts": {
+    "dev": "vite",
     "build": "vite build",
-    "prepublishOnly": "npm run build",
     "build:rollup": "rollup -c",
-    "watch:rollup": "rollup -c -w",
-    "watch:vite": "vite build --watch",
-    "dev": "vite",
-    "start": "npx http-server -p 8080",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "build:css": "node scripts/build-css.cjs",
+    "build:sprite": "node scripts/build-svg-sprite.cjs",
+    "build:all": "node scripts/build-css.cjs && node scripts/build-svg-sprite.cjs",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "lint": "eslint js/ src/",
-    "lint:fix": "eslint js/ src/ --fix",
-    "format": "prettier --write js/ src/ css/"
+    "test:coverage": "jest --coverage"
   },
   "keywords": [
     "ui",
     "components",
-    "ui-components",
     "design-system",
+    "frontend",
     "vanilla-js",
     "no-framework",
     "lightweight",
-    "web-components",
-    "frontend",
-    "css-framework",
-    "javascript-ui",
-    "form-validation",
+    "ssr",
+    "server-side-rendering",
+    "declarative",
     "data-binding",
+    "htmx-alternative",
+    "alpinejs-alternative",
     "responsive",
     "dark-theme",
-    "accessibility",
-    "flask",
-    "django",
-    "python",
-    "gin",
-    "go",
-    "spring-boot",
-    "java",
-    "aspnetcore",
-    "csharp",
-    "express",
-    "nodejs",
-    "rails",
-    "ruby",
-    "backend-agnostic",
-    "html-css-js"
+    "http-client",
+    "axios-adapter",
+    "typescript"
   ],
   "author": "kupola-cn",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kupola-cn/kupola"
+  },
+  "bugs": {
+    "url": "https://github.com/kupola-cn/kupola/issues"
+  },
+  "homepage": "https://github.com/kupola-cn/kupola",
   "files": [
-    "dist",
-    "js",
-    "css",
-    "icons",
-    "utils",
-    "types",
-    "templates",
-    "README.md",
-    "SKILL.md",
-    "INTEGRATION.md",
-    "CHANGELOG.md",
-    "PROJECT_SUMMARY.md"
+    "dist/",
+    "js/",
+    "css/",
+    "icons/",
+    "plugins/",
+    "adapters/",
+    "types/",
+    "scripts/"
   ],
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^29.0.3",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^1.0.0",
-    "clean-css": "^5.3.3",
-    "rollup": "^4.62.2",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "eslint": "^8.57.0",
+    "jest": "^29.7.0",
+    "prettier": "^3.2.5",
+    "rollup": "^4.13.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-postcss": "^4.0.2",
-    "terser": "^5.31.0",
-    "vite": "^5.4.1",
-    "eslint": "^9.5.0",
-    "prettier": "^3.3.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0"
-  },
-  "dependencies": {
-    "ws": "^8.21.0"
+    "vite": "^5.1.6"
   }
-}
+}

package/plugins/vite-plugin-kupola.js

@@ -0,0 +1,120 @@
+/**
+ * @kupola/vite-plugin - Vite plugin for Kupola development
+ * 
+ * Features:
+ * - Auto-import useDeps/useQuery when detected in code
+ * - Auto-inject Kupola CSS
+ * - Dev-time dependency graph visualization
+ * - Transform helper for @depends-like syntax
+ */
+
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+
+/**
+ * @param {Object} options
+ * @param {boolean} [options.autoCSS=true] - Auto inject Kupola CSS
+ * @param {boolean} [options.autoImport=true] - Auto import useDeps/useQuery
+ * @param {boolean} [options.devTools=true] - Enable dev tools in dev mode
+ * @param {string} [options.cssPath] - Custom CSS path
+ */
+export function kupola(options = {}) {
+    const {
+        autoCSS = true,
+        autoImport = true,
+        devTools = true,
+        cssPath = null
+    } = options;
+
+    let isDev = false;
+    let kupolaRoot = null;
+
+    return {
+        name: 'kupola',
+        enforce: 'pre',
+
+        configResolved(config) {
+            isDev = config.command === 'serve';
+            kupolaRoot = config.root;
+        },
+
+        // Auto-import useDeps/useQuery
+        transform(code, id) {
+            if (!autoImport) return null;
+            if (!id.endsWith('.js') && !id.endsWith('.ts') && !id.endsWith('.vue') && !id.endsWith('.jsx') && !id.endsWith('.tsx')) {
+                return null;
+            }
+
+            // Skip node_modules
+            if (id.includes('node_modules')) return null;
+
+            let transformed = code;
+            let hasChanges = false;
+
+            // Detect useDeps usage without import
+            if (code.includes('useDeps(') && !code.includes("from '@kupola/kupola'") && !code.includes("from 'kupola'") && !code.includes('from "../js/depends.js"') && !code.includes('from "./js/depends.js"')) {
+                const importStatement = `import { useDeps } from '@kupola/kupola';\n`;
+                transformed = importStatement + transformed;
+                hasChanges = true;
+            }
+
+            // Detect useQuery usage without import
+            if (code.includes('useQuery(') && !code.includes("from '@kupola/kupola'") && !code.includes("from 'kupola'") && !code.includes('from "../js/depends.js"') && !code.includes('from "./js/depends.js"')) {
+                if (!transformed.includes("import { useQuery }")) {
+                    const importStatement = `import { useQuery } from '@kupola/kupola';\n`;
+                    transformed = importStatement + transformed;
+                    hasChanges = true;
+                }
+            }
+
+            if (hasChanges) {
+                return {
+                    code: transformed,
+                    map: null
+                };
+            }
+
+            return null;
+        },
+
+        // Inject CSS in dev mode
+        transformIndexHtml(html) {
+            if (!autoCSS) return html;
+
+            const cssLink = cssPath || '/css/kupola.css';
+            if (!html.includes(cssLink)) {
+                return html.replace(
+                    '</head>',
+                    `  <link rel="stylesheet" href="${cssLink}">\n</head>`
+                );
+            }
+            return html;
+        },
+
+        // Dev tools integration
+        configureServer(server) {
+            if (!devTools || !isDev) return;
+
+            // Add middleware for dependency graph API
+            server.middlewares.use('/__kupola-deps', (req, res) => {
+                res.setHeader('Content-Type', 'application/json');
+                res.end(JSON.stringify({
+                    status: 'ok',
+                    version: '1.2.1',
+                    features: ['useDeps', 'useQuery', 'Scheduler', 'CacheManager']
+                }));
+            });
+        },
+
+        // Handle hot update for depends files
+        handleHotUpdate(ctx) {
+            const { file, modules } = ctx;
+            if (file.includes('depends.js')) {
+                // Force full reload when core depends files change
+                return [];
+            }
+        }
+    };
+}
+
+export default kupola;