kempo-ui 0.0.36 → 0.0.38

package/docs/utils/context.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>

package/docs/utils/cookie.html

@@ -7,7 +7,7 @@
 	<link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
 	<link rel="manifest" href="../manifest.json" />
 	<link rel="stylesheet" href="../kempo-vars.css" />
-	<link rel="stylesheet" href="../kempo.min.css" />
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
 	<link rel="stylesheet" href="../kempo-hljs.css" />
 	<link rel="stylesheet" href="../styles.css" />
 	<script>window.litDisableBundleWarning = true;</script>

package/docs/utils/debounce.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>

package/docs/utils/drag.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>

package/docs/utils/formatTimestamp.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>

package/docs/utils/object.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>

package/docs/utils/propConverters.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>

package/docs/utils/string.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>

package/docs/utils/theme.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>

package/docs/utils/toTitleCase.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>

package/docs/utils/type.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>

package/docs/utils/wait.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
   <link rel="manifest" href="../manifest.json" />
   <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
   <link rel="stylesheet" href="../kempo-hljs.css" />
   <link rel="stylesheet" href="../styles.css" />
   <script>window.litDisableBundleWarning = true;</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
@@ -12,7 +12,8 @@
     "test": "npx kempo-test",
     "test:gui": "npx kempo-test --gui",
     "test:browser": "npx kempo-test -b",
-    "test:node": "npx kempo-test -n"
+    "test:node": "npx kempo-test -n",
+    "update-kempo-css": "node scripts/update-kempo-css.js"
   },
   "repository": {
     "type": "git",
@@ -28,8 +29,5 @@
     "kempo-server": "^1.8.2",
     "kempo-testing-framework": "^1.4.0",
     "terser": "^5.43.1"
-  },
-  "dependencies": {
-    "kempo-css": "^1.0.8"
   }
 }

package/scripts/build.js

@@ -102,15 +102,4 @@ await copyDir('./dist', './docs/src/');
 console.log('Copying icons/ to docs/icons/');
 await copyDir('./icons', './docs/icons/');
 
-console.log('Copying base kempo.min.css from external package');
-const kempoCssSource = './node_modules/kempo-css/dist/kempo.min.css';
-const kempoCssDest = './docs/kempo.min.css';
-try {
-  const kempoCssContent = await fs.readFile(kempoCssSource, 'utf-8');
-  await fs.writeFile(kempoCssDest, kempoCssContent, 'utf-8');
-  console.log('Successfully copied kempo.min.css from kempo-css package');
-} catch (error) {
-  console.warn('Warning: Could not copy kempo.min.css:', error.message);
-}
-
 console.log('Build Complete');

package/scripts/update-kempo-css.js

@@ -0,0 +1,49 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { promptUser } from 'kempo-server/utils/cli';
+
+const getHtmlFiles = async dir => {
+  const files = [];
+  const entries = await fs.readdir(dir, { withFileTypes: true });
+  for(const entry of entries){
+    const fullPath = path.join(dir, entry.name);
+    if(entry.isDirectory()){
+      files.push(...await getHtmlFiles(fullPath));
+    } else if(entry.name.endsWith('.html')){
+      files.push(fullPath);
+    }
+  }
+  return files;
+};
+
+const docsDir = path.resolve('./docs');
+const cdnPattern = /https:\/\/cdn\.jsdelivr\.net\/npm\/kempo-css@[\d.]+\/dist\/kempo\.min\.css/g;
+
+const newVersion = await promptUser('Enter the new kempo-css version (e.g., 1.3.1)');
+if(!newVersion || !/^\d+\.\d+\.\d+$/.test(newVersion)){
+  console.error('Invalid version format. Please use semantic versioning (e.g., 1.3.1)');
+  process.exit(1);
+}
+
+const newCdnUrl = `https://cdn.jsdelivr.net/npm/kempo-css@${newVersion}/dist/kempo.min.css`;
+
+console.log(`\nUpdating kempo-css CDN references to version ${newVersion}...`);
+
+const htmlFiles = await getHtmlFiles(docsDir);
+
+let updatedCount = 0;
+for(const file of htmlFiles){
+  const content = await fs.readFile(file, 'utf-8');
+  if(cdnPattern.test(content)){
+    const newContent = content.replace(cdnPattern, newCdnUrl);
+    await fs.writeFile(file, newContent, 'utf-8');
+    console.log(`Updated: ${path.relative(docsDir, file)}`);
+    updatedCount++;
+  }
+}
+
+if(updatedCount === 0){
+  console.log('No files found with kempo-css CDN references.');
+} else {
+  console.log(`\nDone! Updated ${updatedCount} file(s).`);
+}

package/src/components/Table.js

@@ -885,7 +885,8 @@ export default class Table extends ShadowComponent {
 
   removeAllFilters() {
     if (this.filters.length) {
-      this.filters.forEach(({ field, condition, value }) => {
+      // Copy array to avoid mutation during iteration
+      [...this.filters].forEach(({ field, condition, value }) => {
         this.removeFilter(field, condition, value, false);
       });
       this.requestUpdate();

package/src/components/tableControls/PageSelect.js

@@ -3,17 +3,13 @@ import { html, css } from '../../lit-all.min.js';
 
 export default class PageSelect extends TableControl {
 	static properties = {
-		...TableControl.properties,
-		currentPage: { type: Number, state: true },
-		totalPages: { type: Number, state: true }
+		...TableControl.properties
 	};
 
 	constructor() {
 		super({
 			maxWidth: null
 		});
-		this.currentPage = 1;
-		this.totalPages = 1;
 	}
 
 	/*
@@ -22,17 +18,16 @@ export default class PageSelect extends TableControl {
 
 	connectedCallback() {
 		super.connectedCallback();
-		this.onTableEvent('pageChange', this.handlePageChange);
-		this.onTableEvent('pageSizeChange', this.handlePageSizeChange);
-		this.onTableEvent('pageCountChanged', this.handlePageCountChange);
+		this.onTableEvent('pageChange pageSizeChange pageCountChanged recordsSet', this.handleTableUpdate);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if(this.table){
-			this.table.removeEventListener('pageChange', this.handlePageChange);
-			this.table.removeEventListener('pageSizeChange', this.handlePageSizeChange);
-			this.table.removeEventListener('pageCountChanged', this.handlePageCountChange);
+			this.table.removeEventListener('pageChange', this.handleTableUpdate);
+			this.table.removeEventListener('pageSizeChange', this.handleTableUpdate);
+			this.table.removeEventListener('pageCountChanged', this.handleTableUpdate);
+			this.table.removeEventListener('recordsSet', this.handleTableUpdate);
 		}
 	}
 
@@ -40,23 +35,8 @@ export default class PageSelect extends TableControl {
 		Event Handlers
 	*/
 
-	handlePageChange = () => {
-		if(this.table){
-			this.currentPage = this.table.getCurrentPage();
-		}
-	};
-
-	handlePageSizeChange = () => {
-		if(this.table){
-			this.currentPage = this.table.getCurrentPage();
-			this.totalPages = this.table.getTotalPages();
-		}
-	};
-
-	handlePageCountChange = () => {
-		if(this.table){
-			this.totalPages = this.table.getTotalPages();
-		}
+	handleTableUpdate = () => {
+		this.requestUpdate();
 	};
 
 	handleSelectChange = e => {
@@ -65,6 +45,18 @@ export default class PageSelect extends TableControl {
 		}
 	};
 
+	/*
+		Getters
+	*/
+
+	get currentPage() {
+		return this.table ? this.table.getCurrentPage() : 1;
+	}
+
+	get totalPages() {
+		return this.table ? this.table.getTotalPages() : 1;
+	}
+
 	/*
 		Rendering Logic
 	*/