kempo 3.2.1 → 4.1.0

package/docs/kempo/utils/drag.js

@@ -1 +1 @@
-export default(e={})=>{let t,o,n;const{element:s=(()=>{}),callback:a=(()=>{}),startCallback:v=(()=>{}),moveCallback:i=(()=>{}),endCallback:r=(()=>{}),preventScroll:d=!1}=e,u=s=>{d&&s.preventDefault(),clearTimeout(n);const v=s.pageX||s.touches[0].pageX,r=s.pageY||s.touches[0].pageY,u={x:v-t,y:r-o,...e};a(u),i(u)},c=({pageX:s,pageY:v})=>{clearTimeout(n);const i={x:s-t,y:v-o,...e};a(i),r(i),m()},p=s=>{clearTimeout(n),t=s.pageX||s.touches[0].pageX,o=s.pageY||s.touches[0].pageY;const a={x:0,y:0,...e};v(a),window.addEventListener("mousemove",u,{passive:!d}),window.addEventListener("mouseup",c,{passive:!d}),window.addEventListener("touchmove",u,{passive:!d}),window.addEventListener("touchend",c,{passive:!d})},m=()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",c),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",c)};return s.addEventListener("mousedown",p,{passive:!d}),s.addEventListener("touchstart",p,{passive:!d}),()=>{s.removeEventListener("mousedown",p),m()}};
+export default(e={})=>{let t,o,n;const{element:s=()=>{},callback:a=()=>{},startCallback:v=()=>{},moveCallback:i=()=>{},endCallback:r=()=>{},preventScroll:d=!1}=e,u=s=>{d&&s.preventDefault(),clearTimeout(n);const v=s.pageX||s.touches[0].pageX,r=s.pageY||s.touches[0].pageY,u={x:v-t,y:r-o,...e};a(u),i(u)},c=({pageX:s,pageY:v})=>{clearTimeout(n);const i={x:s-t,y:v-o,...e};a(i),r(i),m()},p=s=>{clearTimeout(n),t=s.pageX||s.touches[0].pageX,o=s.pageY||s.touches[0].pageY;const a={x:0,y:0,...e};v(a),window.addEventListener("mousemove",u,{passive:!d}),window.addEventListener("mouseup",c,{passive:!d}),window.addEventListener("touchmove",u,{passive:!d}),window.addEventListener("touchend",c,{passive:!d})},m=()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",c),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",c)};return s.addEventListener("mousedown",p,{passive:!d}),s.addEventListener("touchstart",p,{passive:!d}),()=>{s.removeEventListener("mousedown",p),m()}};

package/docs/kempo/utils/fs-utils.js

@@ -0,0 +1 @@
+import fs from"fs/promises";import path from"path";export async function ensureDir(i){try{await fs.mkdir(i,{recursive:!0})}catch(i){if("EEXIST"!==i.code)throw i}}export async function copyDir(i,r){await ensureDir(r);const t=await fs.readdir(i,{withFileTypes:!0});for(const a of t){const t=path.join(i,a.name),o=path.join(r,a.name);a.isDirectory()?await copyDir(t,o):await fs.copyFile(t,o)}}export async function emptyDir(i){try{const r=await fs.readdir(i);await Promise.all(r.map((r=>fs.rm(path.join(i,r),{recursive:!0,force:!0}))))}catch(i){if("ENOENT"!==i.code)throw i}}

package/docs/kempo/utils/minify.js

@@ -0,0 +1 @@
+export function minifyCss(e){return e.replace(/\s*\{\s*/g,"{").replace(/\s*\}\s*/g,"}").replace(/\n/g,"").replace(/\r/g,"").replace(/\s+/g," ").replace(/\s*\:\s*/g,":").replace(/\s*\;\s*/g,";").replace(/;\}/g,"}")}

package/docs/nav.inc.html

@@ -55,6 +55,7 @@
       <a href="%%root%%components/table.html">Table</a>
       <a href="%%root%%components/tabs.html">Tabs</a>
       <a href="%%root%%components/tags.html">Tags</a>
+      <a href="%%root%%components/toast.html">Toast</a>
       <a href="%%root%%components/theme-switcher.html">Theme Switcher</a>
       <a href="%%root%%components/timestamp.html">Timestamp</a>
       <a href="%%root%%components/toggle.html">Toggle</a>
@@ -62,7 +63,7 @@
 
     <h5 class="mb0">Utils</h5>
     <div class="pl mb">
-      
+      <a href="%%root%%utils/Server.html">Server</a>
     </div>
   </menu>
 </k-side-menu>

package/docs/utils/Server.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Template - Utils - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
+  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
+  <script type="module">
+    import Import from '../kempo/components/Import.js';
+    import Icon from '../kempo/components/Icon.js';
+    import Search from '../kempo/components/Search.js';
+    Import.addReplacement('root', '../');
+    Icon.pathToIcons = ['../icons'];
+    Search.searchDataUrl = '../search.json';
+  </script>
+</head>
+<body>
+  <k-import src="../nav.inc.html"></k-import>
+  <h1 class="ta-center">Server</h1>
+  <main>
+    <details class="b r mb">
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <h6>Examples</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#staticServing">Static File Serving</a><br />
+        <a href="#routePatterns">Route Patterns</a><br />
+
+        <h6 class="mt">JavaScript Reference</h6>
+        <a href="#constructor">Constructor</a><br />
+        <a href="#requirements">Requirements</a><br />
+        <a href="#methods">Methods</a><br />
+        <a href="#staticMembers">Static Members</a><br />
+      </div>
+    </details>
+
+    <h3>Description</h3>
+    <p>A lightweight HTTP server utility for serving static files and handling route patterns with wildcard support.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <pre><code class="language-javascript">import { Server } from '../utils/Server.js';
+
+const server = new Server();
+server
+  .static('/assets', './public')
+  .route('/api/*.json', async (req, res) => {
+    // Handle JSON requests
+  });
+
+await server.listen(8080);</code></pre>
+
+    <h3 id="staticServing"><a href="#staticServing" class="no-link">Static File Serving</a></h3>
+    <pre><code class="language-javascript">// Serve entire directories
+server.static('/assets', './public');
+server.static('/docs', './documentation');
+
+// Serve single files with custom headers
+server.route('/style.css', async (req, res) => {
+  await server.serveFile('./styles/main.css', res, {
+    'Cache-Control': 'no-cache'
+  });
+});</code></pre>
+
+    <h3 id="routePatterns"><a href="#routePatterns" class="no-link">Route Patterns</a></h3>
+    <p>Routes support wildcard patterns for flexible path matching:</p>
+    <ul>
+      <li><code>*</li>
+      <li><code>**</code> - Matches any characters including /</li>
+    </ul>
+    <pre><code class="language-javascript">// Match specific file types
+server.route('/api/*.json', handler);
+
+// Match files in subdirectories
+server.route('/docs/**/*.html', handler);
+
+// Match everything under a path
+server.route('/assets/**/*', handler);</code></pre>
+
+    <h2 id="jsRef">JavaScript Reference</h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h5><code>new Server()</code></h5>
+    <p>Creates a new server instance.</p>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li>Node.js built-in modules only (http, fs/promises, path)</li>
+      <li>No external dependencies</li>
+    </ul>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    
+    <h5><code>route(path: string, handler: Function, methods?: string[]): Server</code></h5>
+    <p>Registers a route handler with optional HTTP method restrictions. Returns this for chaining.</p>
+
+    <h5><code>static(urlPath: string, dirPath: string): Server</code></h5>
+    <p>Serves an entire directory of static files. Returns this for chaining.</p>
+
+    <h5><code>serveFile(filePath: string, res: Response, headers?: object): Promise&lt;void&gt;</code></h5>
+    <p>Serves a single file with appropriate MIME type and optional headers.</p>
+
+    <h5><code>listen(port?: number): Promise&lt;http.Server&gt;</code></h5>
+    <p>Starts the server on the specified port. Returns a Promise that resolves to the server instance.</p>
+
+    <h3 id="staticMembers"><a href="#staticMembers" class="no-link">Static Members</a></h3>
+    
+    <h5><code>static mimeTypes: Record&lt;string, string&gt;</code></h5>
+    <p>MIME type mappings for file extensions.</p>
+
+    <h5><code>static textExtensions: string[]</code></h5>
+    <p>List of file extensions that should be served as text.</p>
+
+    <h5><code>static getMimeType(filePath: string): string</code></h5>
+    <p>Returns the appropriate MIME type for a file based on its extension.</p>
+  </main>
+  <script type="module" src="../kempo/components/Import.js"></script> 
+</body>
+</html>

package/icons/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="error" d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240ZM330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm34-80h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z"/></svg>

package/icons/warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="warning" d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "3.2.1",
+  "version": "4.1.0",
   "type": "module",
   "description": "A web component library",
   "exports": {
@@ -11,7 +11,7 @@
     "./components/*": "./dist/components/*.js"
   },
   "scripts": {
-    "test": "node ./scripts/test.js",
+    "test": "node ./test/index.js",
     "build": "node ./scripts/build.js",
     "docs": "node ./scripts/docs.js",
     "docs-src": "node ./scripts/docs.js -s"
@@ -20,8 +20,6 @@
   "license": "MIT",
   "dependencies": {},
   "devDependencies": {
-    "express": "^4.18.3",
-    "fs-extra": "^11.2.0",
     "terser": "^5.29.2"
   },
   "directories": {

package/scripts/build.js

@@ -1,8 +1,8 @@
 import fs from 'fs/promises';
-import fse from 'fs-extra';
 import { minify } from 'terser';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { ensureDir, copyDir, emptyDir } from '../src/utils/fs-utils.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -57,7 +57,7 @@ process.stdout.write(`0/${components.length} = 0%`);
 await Promise.all(components.map(async component => {
   const relativePath = path.relative(componentsDir, component);
   const destPath = path.join('./dist/components', relativePath);
-  await fse.ensureDir(path.dirname(destPath));
+  await ensureDir(path.dirname(destPath));
   await fs.writeFile(destPath, minifiedComponents[component], 'utf-8');
   process.stdout.write("\r");
   complete++;
@@ -95,7 +95,7 @@ process.stdout.write("\n");
 complete = 0;
 console.log('Saving Minified Utils to dist/');
 process.stdout.write(`0/${utils.length} = 0%`);
-await fse.ensureDir('./dist/utils');
+await ensureDir('./dist/utils');
 await Promise.all(utils.map(async util => {
   await fs.writeFile(`./dist/utils/${util}.js`, minifiedUtils[util], 'utf-8');
   process.stdout.write("\r");
@@ -139,16 +139,16 @@ console.log('Saving kempo-hljs.css');
 await fs.writeFile('./dist/kempo-hljs.css', minifiedKempoHljsCSS, 'utf-8');
 
 console.log('Copying dist/ to docs/');
-await fse.ensureDir('./docs/'); // will also ensure docs/kempo
-await fse.copy('./dist', './docs/kempo')
+await ensureDir('./docs/'); // will also ensure docs/kempo
+await copyDir('./dist', './docs/kempo')
 
 const iconsSrcDir = path.join(__dirname, '../icons');
 const iconsDestDir = path.join(__dirname, '../docs/icons');
 
 console.log('Deleting svg icons currently in docs/icons');
-await fse.ensureDir(iconsDestDir);
-await fse.emptyDir(iconsDestDir);
+await ensureDir(iconsDestDir);
+await emptyDir(iconsDestDir);
 console.log('Copying all files from icons to docs/icons');
-await fse.copy(iconsSrcDir, iconsDestDir);
+await copyDir(iconsSrcDir, iconsDestDir);
 
 console.log('Build Complete');

package/scripts/docs.js

@@ -1,10 +1,7 @@
-import express from 'express';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
-import {
-  getArgs,
-  runChildNodeProcess
-} from '../src/utils/cli.js';
+import { Server } from '../src/utils/Server.js';
+import { getArgs, runChildNodeProcess } from '../src/utils/cli.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -25,23 +22,26 @@ if(build){
   runChildNodeProcess(join(__dirname, 'build.js'));
 }
 
-const app = express();
+const server = new Server();
 
-if(src){
-  app.use('/kempo', express.static('src'));
-  app.use('/icons', express.static('icons'));
-  app.get('/kempo/kempo-styles.css', (req, res) => {
-    res.set('Cache-Control', 'no-cache');
-    res.sendFile(join(__dirname, '../src/kempo-styles.css'));
-  })
+if (src) {
+  server
+    .get('/', join(__dirname, '../docs/'))
+    .get('/kempo/kempo-styles.css', join(__dirname, '../src/kempo-styles.css'))
+    .get('/kempo/*', join(__dirname, '../src/*'))
+    .get('/icons/*', join(__dirname, '../icons/*'))
+    .get('/*', join(__dirname, '../docs/*'));
 } else {
-  app.get('/kempo/kempo-styles.css', (req, res) => {
-    res.set('Cache-Control', 'private');
-    res.sendFile(join(__dirname, '../docs/kempo/kempo-styles.css'));
-  });
+  server
+    .get('/', join(__dirname, '../docs/'))
+    .get('/kempo/kempo-styles.css', join(__dirname, '../docs/kempo/kempo-styles.css'))
+    .get('/*', join(__dirname, '../docs/*'));
 }
-app.use(express.static('docs'));
 
-app.listen(port, () => {
+try {
+  await server.listen(port);
   console.log(`Docs Running on: http://localhost:${port}`);
-});
+} catch (err) {
+  console.error('Failed to start server:', err.message);
+  process.exit(1);
+}

package/src/components/Dialog.js

@@ -244,9 +244,19 @@ export default class Dialog extends Component {
 
   static create(contents = '', options = {}){
     if(options.closeExisting!==false)document.querySelectorAll('k-dialog').forEach(d=>d.close());
+    const {
+      removeOnClose = true,
+      closeCallback = () => {}
+    } = options;
     const $dialog = new Dialog({
       opened: true,
-      ...options 
+      ...options,
+      closeCallback: (...args) => {
+        if(removeOnClose){
+          $dialog.remove();
+        }
+        closeCallback(...args);
+      }
     });
     onEvent($dialog, 'close',  $dialog.remove);
     if(contents instanceof HTMLElement || contents instanceof DocumentFragment){