npm - kempo-ui - Versions diffs - 0.0.13 → 0.0.15 - Mend

kempo-ui 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (181) hide show

package/docs/utils/watchWindowSize.html DELETED Viewed

@@ -1,162 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>watchWindowSize - Kempo UI</title>
-  <link rel="stylesheet" href="../kempo-vars.css" />
-  <link rel="stylesheet" href="../kempo.min.css" />
-  <link rel="stylesheet" href="../kempo-hljs.css" />
-  <link rel="stylesheet" href="../styles.css" />
-  <script>window.litDisableBundleWarning = true;</script>
-  <script type="module" src="./init.js"></script>
-</head>
-<body>
-  <k-import src="../nav.inc.html"></k-import>
-  <main>
-    <h1>watchWindowSize</h1>
-    <details
-      class="b r mb"
-    >
-      <summary class="p">Table of Contents</summary>
-      <div class="m mt0 pl">
-        <h6>Usage</h6>
-        <a href="#basicUsage">Basic Usage</a><br />
-        <a href="#functions">Functions</a><br />
-        <a href="#examples">Examples</a><br />
-      </div>
-    </details>
-    <h3>Description</h3>
-    <p>The <code>watchWindowSize</code> utility provides a debounced way to monitor window resize events. It manages multiple handlers efficiently and automatically debounces resize events to improve performance.</p>
-    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
-    <p>Import and use the window size watching functions:</p>
-    <pre><code class="hljs javascript">import { watchWindowSize, unwatchWindowSize } from './utils/watchWindowSize.js';
-const handler = (width) => {
-  console.log('Window width:', width);
-};
-// Start watching
-const currentWidth = watchWindowSize(handler);
-// Stop watching when done
-unwatchWindowSize(handler);</code></pre>
-    <h3 id="functions"><a href="#functions" class="no-link">Functions</a></h3>
-    <h5><code>watchWindowSize(handler)</code></h5>
-    <p>Registers a handler function to be called when the window is resized.</p>
-    <ul>
-      <li><strong>handler:</strong> Function that receives the new window width</li>
-      <li><strong>Returns:</strong> Current window width</li>
-    </ul>
-    <h5><code>unwatchWindowSize(handler)</code></h5>
-    <p>Unregisters a previously registered handler function.</p>
-    <ul>
-      <li><strong>handler:</strong> The same function reference that was registered</li>
-    </ul>
-    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
-    <h4>Responsive Component</h4>
-    <pre><code class="hljs javascript">import { watchWindowSize, unwatchWindowSize } from './utils/watchWindowSize.js';
-class ResponsiveComponent extends LitElement {
-  constructor() {
-    super();
-    this.isMobile = false;
-    this.resizeHandler = this.handleResize.bind(this);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    const currentWidth = watchWindowSize(this.resizeHandler);
-    this.handleResize(currentWidth);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    unwatchWindowSize(this.resizeHandler);
-  }
-  handleResize(width) {
-    this.isMobile = width < 768;
-    this.requestUpdate();
-  }
-  render() {
-    return html`
-      &lt;div class="${this.isMobile ? 'mobile' : 'desktop'}"&gt;
-        Content adapts to screen size
-      &lt;/div&gt;
-    `;
-  }
-}</code></pre>
-    <h4>Multiple Handlers</h4>
-    <pre><code class="hljs javascript">// Handler for navigation
-const navHandler = (width) => {
-  const nav = document.querySelector('.navigation');
-  nav.classList.toggle('mobile', width < 1024);
-};
-// Handler for sidebar
-const sidebarHandler = (width) => {
-  const sidebar = document.querySelector('.sidebar');
-  sidebar.style.display = width < 768 ? 'none' : 'block';
-};
-// Both handlers will be called on resize
-watchWindowSize(navHandler);
-watchWindowSize(sidebarHandler);
-// Clean up when needed
-unwatchWindowSize(navHandler);
-unwatchWindowSize(sidebarHandler);</code></pre>
-    <h4>Breakpoint Detection</h4>
-    <pre><code class="hljs javascript">const breakpoints = {
-  mobile: 768,
-  tablet: 1024,
-  desktop: 1200
-};
-const breakpointHandler = (width) => {
-  let currentBreakpoint = 'mobile';
-  if (width >= breakpoints.desktop) {
-    currentBreakpoint = 'desktop';
-  } else if (width >= breakpoints.tablet) {
-    currentBreakpoint = 'tablet';
-  }
-  document.body.setAttribute('data-breakpoint', currentBreakpoint);
-  // Dispatch custom event
-  window.dispatchEvent(new CustomEvent('breakpointchange', {
-    detail: { width, breakpoint: currentBreakpoint }
-  }));
-};
-watchWindowSize(breakpointHandler);</code></pre>
-    <h4>Performance Benefits</h4>
-    <p>The utility automatically debounces resize events, so you don't need to worry about performance:</p>
-    <pre><code class="hljs javascript">// This handler will only be called after resize events stop
-const expensiveHandler = (width) => {
-  // Expensive DOM calculations or API calls
-  recalculateLayout();
-  updateCharts();
-  reflow();
-};
-watchWindowSize(expensiveHandler); // Automatically debounced</code></pre>
-  </main>
-  <div style="height:33vh"></div>
-</body>
-</html>

package/src/components/Collapsible.js DELETED Viewed

@@ -1,109 +0,0 @@
-import ShadowComponent from './ShadowComponent.js';
-import { html, css } from '../lit-all.min.js';
-import { boolTrueFalse } from '../utils/propConverters.js';
-import './Icon.js';
-export default class Collapsible extends ShadowComponent {
-	/*
-		Properties
-	*/
-	static properties = {
-		opened: { type: Boolean, reflect: true, converter: boolTrueFalse }
-	};
-	constructor() {
-		super();
-		this.opened = false;
-	}
-	/*
-		Event Handlers
-	*/
-	handleLabelClick = () => {
-		this.toggle();
-	}
-	/*
-		Lifecycle Callbacks
-	*/
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if(changedProperties.has('opened')) {
-			this.dispatchEvent(new CustomEvent('openedchanged', {
-				detail: this.opened ? 'open' : 'close'
-			}));
-			this.dispatchEvent(new CustomEvent(this.opened ? 'open' : 'close'));
-		}
-	}
-	/*
-		Public Methods
-	*/
-	open() {
-		this.opened = true;
-	}
-	close() {
-		this.opened = false;
-	}
-	toggle() {
-		this.opened = !this.opened;
-		this.dispatchEvent(new CustomEvent('openedtoggled'));
-	}
-	/*
-		Styles
-	*/
-	static styles = css`
-		:host {
-			display: block;
-		}
-		#labelContainer {
-			display: flex;
-			cursor: pointer;
-		}
-		#label {
-			flex: 1 1 auto;
-		}
-		#labelIcon {
-			flex: 0 0 none;
-			opacity: 0.5;
-			transform: rotate(90deg);
-			transition: transform var(--animation_ms, 256ms);
-		}
-		#labelContainer:hover #labelIcon {
-			opacity: 1;
-		}
-		:host([opened="true"]) #labelIcon {
-			transform: rotate(-90deg);
-		}
-		:host(:not([opened="true"])) #content {
-			display: none;
-		}
-	`;
-	/*
-		Rendering
-	*/
-	render() {
-		return html`
-			<div id="labelContainer" @click=${this.handleLabelClick}>
-				<div id="label">
-					<slot name="label"></slot>
-				</div>
-				<div id="labelIcon">
-					<slot name="labelIcon">
-						<k-icon name="chevron-right"></k-icon>
-					</slot>
-				</div>
-			</div>
-			<div id="content">
-				<slot></slot>
-			</div>
-		`;
-	}
-}
-customElements.define('k-collapsible', Collapsible);

package/src/components/PersistantCollapsible.js DELETED Viewed

@@ -1,69 +0,0 @@
-import Collapsible from './Collapsible.js';
-export default class PersistantCollapsible extends Collapsible {
-	constructor() {
-		super();
-		this.storageKey = '';
-	}
-	/*
-		Lifecycle Callbacks
-	*/
-	connectedCallback() {
-		super.connectedCallback();
-		this.updateStorageKey();
-		this.loadFromStorage();
-		window.addEventListener('storage', this.handleStorageChange);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		window.removeEventListener('storage', this.handleStorageChange);
-	}
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if(changedProperties.has('opened')) {
-			this.saveToStorage();
-		}
-		if(changedProperties.has('id')) {
-			this.updateStorageKey();
-			this.loadFromStorage();
-		}
-	}
-	/*
-		Event Handlers
-	*/
-	handleStorageChange = event => {
-		if(event.key === this.storageKey) {
-			this.loadFromStorage();
-		}
-	}
-	/*
-		Private Methods
-	*/
-	updateStorageKey() {
-		this.storageKey = this.id ? `PersistantCollapsible-${this.id}` : '';
-	}
-	loadFromStorage() {
-		if(this.storageKey) {
-			const stored = localStorage.getItem(this.storageKey);
-			if(stored !== null) {
-				this.opened = stored === 'true';
-			}
-		}
-	}
-	saveToStorage() {
-		if(this.storageKey) {
-			localStorage.setItem(this.storageKey, this.opened.toString());
-		}
-	}
-}
-customElements.define('k-p-collapsible', PersistantCollapsible);

/package/docs/{icons → kempo-ui/icons}/add.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/arrow-back.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/arrow-down-double.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/arrow-down.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/arrow-forward.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/arrow-up-double.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/arrow-up.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/cards.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/check.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/chevron-left.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/chevron-right.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/close.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/compare.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/delete.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/drag-handle.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/drawing2.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/edit.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/error.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/export-file.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/file-text.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/file.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/filter-off.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/filter.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/first.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/folder-clear.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/folder-create.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/folder-open.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/folder.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/hide.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/image.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/label-add.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/label.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/last.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/menu.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/mode-auto.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/mode-dark.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/mode-light.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/open-in-browser.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/pause.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/play.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/refresh.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/remove.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/save.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/search.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/settings.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/show.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/storage.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/table-visibility.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/tag.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/tools.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/trash-x.svg RENAMED Viewed

File without changes

/package/docs/{icons → kempo-ui/icons}/warning.svg RENAMED Viewed

File without changes

/package/docs/{kempo-hljs.css → kempo-ui/kempo-hljs.css} RENAMED Viewed

File without changes

/package/docs/{kempo.min.css → kempo-ui/kempo.min.css} RENAMED Viewed

File without changes

/package/docs/{media → kempo-ui/media}/civic.jpg RENAMED Viewed

File without changes

/package/docs/{media → kempo-ui/media}/corvette.jpg RENAMED Viewed

File without changes

/package/docs/{media → kempo-ui/media}/evo.jpg RENAMED Viewed

File without changes

/package/docs/{media → kempo-ui/media}/gtr.jpg RENAMED Viewed

File without changes

/package/docs/{media → kempo-ui/media}/nsx.jpg RENAMED Viewed

File without changes

/package/docs/{nav.inc.js → kempo-ui/nav.inc.js} RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Accordion.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Card.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Collapsible.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/ContentSlider.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Dialog.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/FocusCapture.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/HybridComponent.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Icon.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Import.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/LightComponent.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/PersistantCollapsible.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/PhotoViewer.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Resize.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/ShadowComponent.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/ShowMore.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/SideMenu.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Sortable.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Split.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Table.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Tabs.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Tags.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/ThemeSwitcher.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Timestamp.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Toast.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Toggle.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/Tree.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/DeleteRecord.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/Edit.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/ExportCSV.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/ExportJson.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/FieldSortHide.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/Filters.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/FirstPage.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/HiddenCount.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/Hide.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/LastPage.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/NextPage.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/PageSelect.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/PageSize.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/PrevPage.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/Search.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/ShowAll.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/components/tableControls/TableControl.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/lit-all.min.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/utils/debounce.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/utils/drag.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/utils/formatTimestamp.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/utils/propConverters.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/utils/toTitleCase.js RENAMED Viewed

File without changes

/package/docs/{src → kempo-ui/src}/utils/watchWindowSize.js RENAMED Viewed

File without changes

/package/docs/{styles.css → kempo-ui/styles.css} RENAMED Viewed

File without changes