kempo-ui 0.0.35 → 0.0.37

package/src/components/ThemeSwitcher.js

@@ -1,5 +1,6 @@
 import ShadowComponent from './ShadowComponent.js';
 import { html, css } from '../lit-all.min.js';
+import theme from '../utils/theme.js';
 import './Icon.js';
 
 export default class ThemeSwitcher extends ShadowComponent {
@@ -10,24 +11,17 @@ export default class ThemeSwitcher extends ShadowComponent {
 
 	constructor() {
 		super();
-		this.currentTheme = ThemeSwitcher.getCurrentTheme();
+		this.currentTheme = theme.get();
 	}
 
 	/*
 		Event Handlers
 	*/
 	handleClick = () => {
-		const current = ThemeSwitcher.getCurrentTheme();
-		if(current === 'auto') ThemeSwitcher.setTheme('light');
-		if(current === 'light') ThemeSwitcher.setTheme('dark');
-		if(current === 'dark') ThemeSwitcher.setTheme('auto');
-	}
-
-	handleStorageChange = (event) => {
-		if (event.key === 'theme') {
-			this.currentTheme = event.newValue || 'auto';
-			document.documentElement.setAttribute('theme', this.currentTheme);
-		}
+		const current = theme.get();
+		if(current === 'auto') theme.set('light');
+		if(current === 'light') theme.set('dark');
+		if(current === 'dark') theme.set('auto');
 	}
 
 	/*
@@ -35,12 +29,14 @@ export default class ThemeSwitcher extends ShadowComponent {
 	*/
 	connectedCallback() {
 		super.connectedCallback();
-		window.addEventListener('storage', this.handleStorageChange);
+		this.unsubscribe = theme.subscribe(t => {
+			this.currentTheme = t;
+		});
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		window.removeEventListener('storage', this.handleStorageChange);
+		if(this.unsubscribe) this.unsubscribe();
 	}
 
 	/*
@@ -84,26 +80,17 @@ export default class ThemeSwitcher extends ShadowComponent {
 	/*
 		Static Methods
 	*/
-	static setTheme(theme) {
-		localStorage.setItem('theme', theme);
-		document.documentElement.setAttribute('theme', theme);
-		window.dispatchEvent(new StorageEvent('storage', { key: 'theme', newValue: theme }));
+	static setTheme(t) {
+		theme.set(t);
 	}
 
 	static getCurrentTheme() {
-		let theme = document.documentElement.getAttribute('theme');
-		if(!theme) theme = localStorage.getItem('theme');
-		return theme || 'auto';
+		return theme.get();
 	}
-}
 
-/*
-	Auto Theme Detection
-*/
-const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-const colorSchemeChangeHandler = event => document.documentElement.setAttribute('auto-theme', event.matches ? 'dark' : 'light');
-colorSchemeQuery.addEventListener('change', colorSchemeChangeHandler);
-colorSchemeChangeHandler(colorSchemeQuery);
+	static getCalculatedCurrentTheme() {
+		return theme.getCalculated();
+	}
+}
 
-ThemeSwitcher.setTheme(ThemeSwitcher.getCurrentTheme());
 customElements.define('k-theme-switcher', ThemeSwitcher);

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
 	*/

package/src/utils/context.js

@@ -0,0 +1,40 @@
+/*
+  Context Utility
+  - Create global or named shared state
+  - Subscribe/unsubscribe to changes
+  - Set/get context values
+*/
+
+const contexts = {};
+
+const getContext = name => {
+  if(!contexts[name]){
+    contexts[name] = {
+      value: undefined,
+      subscribers: new Set()
+    };
+  }
+  return contexts[name];
+};
+
+export const createContext = (name = 'global', initialValue) => {
+  const ctx = getContext(name);
+  if(initialValue !== undefined && ctx.value === undefined){
+    ctx.value = initialValue;
+  }
+  return {
+    get: () => ctx.value,
+    set: val => {
+      ctx.value = val;
+      ctx.subscribers.forEach(fn => fn(val));
+    },
+    subscribe: fn => {
+      ctx.subscribers.add(fn);
+      fn(ctx.value);
+      return () => ctx.subscribers.delete(fn);
+    },
+    unsubscribe: fn => ctx.subscribers.delete(fn)
+  };
+};
+
+export default createContext;

package/src/utils/theme.js

@@ -0,0 +1,50 @@
+/*
+  Theme Utility
+  - Manage global theme state
+  - Subscribe to theme changes
+  - Persist theme to localStorage
+*/
+
+import createContext from './context.js';
+
+const getInitialTheme = () => {
+  let theme = document.documentElement.getAttribute('theme');
+  if(!theme) theme = localStorage.getItem('theme');
+  return theme || 'auto';
+};
+
+const themeContext = createContext('theme', getInitialTheme());
+
+themeContext.subscribe(theme => {
+  localStorage.setItem('theme', theme);
+  document.documentElement.setAttribute('theme', theme);
+});
+
+export const setTheme = theme => themeContext.set(theme);
+
+export const getTheme = () => themeContext.get();
+
+export const subscribeToTheme = callback => themeContext.subscribe(callback);
+
+export const getCalculatedTheme = () => {
+  const theme = getTheme();
+  if(theme === 'auto'){
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return theme;
+};
+
+/*
+  Auto Theme Detection
+*/
+const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+const colorSchemeChangeHandler = event => document.documentElement.setAttribute('auto-theme', event.matches ? 'dark' : 'light');
+colorSchemeQuery.addEventListener('change', colorSchemeChangeHandler);
+colorSchemeChangeHandler(colorSchemeQuery);
+
+export default {
+  get: getTheme,
+  set: setTheme,
+  subscribe: subscribeToTheme,
+  getCalculated: getCalculatedTheme
+};