kempo-ui 0.1.6 → 0.2.2

package/docs/src/components/SidePanel.js

@@ -1,236 +0,0 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css,nothing}from"../lit-all.min.js";import"./Icon.js";class SidePanel extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0},side:{type:String,reflect:!0},persistentId:{type:String,reflect:!0,attribute:"persistent-id"}};constructor(){super(),this.collapsed=!1,this.side="left",this.persistentId=null,this.isInitialLoad=!0}toggleClick=()=>this.toggle();updated(e){if(super.updated(e),e.has("persistentId")&&this.persistentId&&window?.localStorage){const e=`side-panel-persistent-id-${this.persistentId}`,t=window.localStorage.getItem(e);null!==t&&(this.collapsed="true"===t,this.isInitialLoad=!1)}if(e.has("collapsed")){if(this.persistentId&&window?.localStorage&&!this.isInitialLoad){const e=`side-panel-persistent-id-${this.persistentId}`;window.localStorage.setItem(e,this.collapsed.toString())}this.isInitialLoad=!1;const e=this.collapsed?"collapse":"expand";this.dispatchEvent(new CustomEvent(e)),this.dispatchEvent(new CustomEvent("change",{detail:e})),window.dispatchEvent(new CustomEvent("side-panel-change",{detail:{collapsed:this.collapsed,width:this.collapsed?"3.5rem":"16rem",side:this.side}}))}}expand=()=>this.collapsed=!1;collapse=()=>this.collapsed=!0;toggle(){this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent("toggle"))}render(){return html`
-			<div id="header">
-				<slot name="logo"></slot>
-				<button id="toggle" @click=${this.toggleClick} aria-label="${this.collapsed?"Expand panel":"Collapse panel"}">
-					<k-icon name="arrow-line" direction="${(()=>"right"===this.side?this.collapsed?"left":"right":this.collapsed?"right":"left")()}"></k-icon>
-				</button>
-			</div>
-			<div id="content">
-				<slot></slot>
-			</div>
-		`}static styles=css`
-		:host {
-			--bg: var(--c_bg);
-			--width-expanded: 16rem;
-			--transition-duration: var(--animation_ms, 256ms);
-			display: flex;
-			flex-direction: column;
-			position: fixed;
-			top: 0;
-			left: 0;
-			height: 100vh;
-			width: var(--width-expanded);
-			transition: width var(--transition-duration);
-			background: var(--bg);
-			border-right: 1px solid var(--c_border);
-			z-index: 99;
-		}
-		:host([collapsed]) {
-			width: auto;
-		}
-		:host([side="right"]) {
-			left: auto;
-			right: 0;
-			border-right: none;
-			border-left: 1px solid var(--c_border);
-		}
-		#header {
-			display: flex;
-			align-items: center;
-			justify-content: flex-end;
-			gap: var(--spacer_h);
-			padding: var(--spacer_h);
-			border-bottom: 1px solid var(--c_border);
-			flex-shrink: 0;
-		}
-		::slotted([slot="logo"]) {
-			margin-right: auto;
-			flex: 1;
-			min-width: 0;
-			opacity: 1;
-			transition: opacity var(--transition-duration);
-		}
-		:host([collapsed]) ::slotted([slot="logo"]) {
-			display: none;
-		}
-		#toggle {
-			flex-shrink: 0;
-			width: 2rem;
-			height: 2rem;
-			border: none;
-			background: transparent;
-			color: var(--c_text);
-			cursor: pointer;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			border-radius: var(--radius);
-		}
-		#toggle:hover {
-			background: var(--c_bg_hover);
-		}
-		#content {
-			flex: 1;
-			min-height: 0;
-			overflow-y: auto;
-			overflow-x: hidden;
-			display: flex;
-			flex-direction: column;
-		}
-		:host([collapsed]) #content {
-			align-items: flex-start;
-		}
-		:host(:not([collapsed])) #content {
-			/* scrollbar-gutter: stable; */
-		}
-	`}class SidePanelItem extends ShadowComponent{static properties={icon:{type:String},href:{type:String},active:{type:Boolean,reflect:!0},collapsed:{type:Boolean,reflect:!0},"no-expand":{type:Boolean,attribute:"no-expand"},"hide-when-collapsed":{type:Boolean,attribute:"hide-when-collapsed"}};constructor(){super(),this.icon="",this.href="#",this.active=!1,this.collapsed=!1,this["no-expand"]=!1,this["hide-when-collapsed"]=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};handleClick=e=>{this.collapsed&&!this["no-expand"]&&this.panel&&(e.preventDefault(),this.panel.expand())};render(){return html`
-			<a href="${this.href}" class="item ${this.active?"active bg-primary":""}" @click=${this.handleClick}>
-				${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?html`<k-icon name="dot"></k-icon>`:nothing}
-				${this.collapsed?nothing:html`<span class="label"><slot></slot></span>`}
-			</a>
-		`}static styles=css`
-		:host {
-			display: block;
-		}
-		:host([collapsed][hide-when-collapsed]) {
-			display: none;
-		}
-		.item {
-			display: flex;
-			align-items: center;
-			gap: var(--spacer_h);
-			padding: var(--spacer_h);
-			color: var(--c_text);
-			text-decoration: none;
-			border-radius: var(--radius);
-			margin: 0 var(--spacer_h);
-			transition: background var(--animation_ms), color var(--animation_ms);
-			white-space: nowrap;
-		}
-		:host([collapsed]) .item {
-		}
-		.item:hover {
-			background: var(--c_bg_hover);
-		}
-		.item.active {
-			color: var(--tc_on_primary);
-		}
-		.item.active:hover {
-			background: var(--c_primary);
-			filter: brightness(1.1);
-		}
-		k-icon {
-			flex-shrink: 0;
-		}
-		.label {
-			min-width: 0;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	`}class SidePanelLabel extends ShadowComponent{static properties={collapsed:{type:Boolean,reflect:!0}};constructor(){super(),this.collapsed=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};render(){return this.collapsed?html`<hr>`:html`<div class="label"><slot></slot></div>`}static styles=css`
-		:host {
-			display: block;
-			margin: var(--spacer_h) 0;
-		}
-		:host([collapsed]) {
-			margin: 0 var(--spacer_h);
-			align-self: stretch;
-		}
-		.label {
-			padding: 0 var(--spacer);
-			font-size: 0.75rem;
-			font-weight: 600;
-			text-transform: uppercase;
-			color: var(--c_text_muted);
-			letter-spacing: 0.05em;
-		}
-		hr {
-			border: none;
-			border-top: 1px solid var(--c_border);
-			margin: var(--spacer_h) var(--spacer);
-		}
-		:host([collapsed]) hr {
-			margin: var(--spacer_h) 0;
-		}
-	`}class SidePanelMenu extends ShadowComponent{static properties={icon:{type:String},label:{type:String},open:{type:Boolean,reflect:!0},collapsed:{type:Boolean,reflect:!0},"no-expand":{type:Boolean,attribute:"no-expand"},"hide-when-collapsed":{type:Boolean,attribute:"hide-when-collapsed"}};constructor(){super(),this.icon="",this.label="",this.open=!1,this.collapsed=!1,this["no-expand"]=!1,this["hide-when-collapsed"]=!1}connectedCallback(){super.connectedCallback(),this.panel=this.closest("k-side-panel"),this.panel&&(this.collapsed=this.panel.collapsed,this.panel.addEventListener("collapse",this.handleCollapse),this.panel.addEventListener("expand",this.handleExpand))}disconnectedCallback(){super.disconnectedCallback(),this.panel&&(this.panel.removeEventListener("collapse",this.handleCollapse),this.panel.removeEventListener("expand",this.handleExpand))}handleCollapse=()=>{this.collapsed=!0,this.open=!1,this.requestUpdate()};handleExpand=()=>{this.collapsed=!1,this.requestUpdate()};toggleMenu=()=>{this.collapsed&&!this["no-expand"]&&this.panel?this.panel.expand():this.collapsed||(this.open=!this.open)};render(){return html`
-			<div class="menu-container">
-				<button class="no-btn menu-header ${this.open?"open":""}" @click=${this.toggleMenu}>
-					${this.icon?html`<k-icon name="${this.icon}"></k-icon>`:this.collapsed?html`<k-icon name="dot"></k-icon>`:nothing}
-					${this.collapsed?nothing:html`<span class="label">${this.label}</span>`}
-					${this.collapsed?nothing:html`<k-icon class="chevron" name="chevron" direction="${this.open?"down":"right"}"></k-icon>`}
-				</button>
-				<div class="menu-content ${this.open&&!this.collapsed?"open":""}">
-					<slot></slot>
-				</div>
-			</div>
-		`}static styles=css`
-		:host {
-			display: block;
-		}
-		:host([collapsed][hide-when-collapsed]) {
-			display: none;
-		}
-		.menu-container {
-			margin: 0;
-		}
-		.menu-header {
-			display: flex !important;
-			align-items: center;
-			gap: var(--spacer_h);
-			padding-top: var(--spacer_h) !important;
-			padding-bottom: var(--spacer_h) !important;
-			padding-left: var(--spacer_h) !important;
-			padding-right: var(--spacer_h) !important;
-			color: var(--c_text);
-			background: transparent;
-			border: none;
-			border-radius: var(--radius);
-			margin: 0 var(--spacer_h);
-			width: calc(100% - var(--spacer));
-			cursor: pointer;
-			text-align: left;
-			white-space: nowrap;
-			transition: background var(--animation_ms);
-		}
-		:host([collapsed]) .menu-header {
-			width: auto;
-		}
-		.menu-header:hover {
-			background: var(--c_bg_hover);
-		}
-		k-icon {
-			flex-shrink: 0;
-		}
-		.label {
-			flex: 1;
-			min-width: 0;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-		.chevron {
-			transition: transform var(--animation_ms);
-		}
-		.menu-content {
-			max-height: 0;
-			overflow: hidden;
-			transition: max-height var(--animation_ms);
-			padding-left: calc(var(--spacer_h) * 2);
-		}
-		:host([collapsed]) .menu-content {
-			padding-left: 0;
-		}
-		.menu-content.open {
-			max-height: 500px;
-		}
-		::slotted(*) {
-			margin: 0.25rem 0;
-		}
-	`}class SidePanelSpacer extends ShadowComponent{render(){return html`<div class="spacer"></div>`}static styles=css`
-		:host {
-			display: block;
-			flex: 1;
-		}
-		.spacer {
-			height: 100%;
-		}
-	`}customElements.define("k-side-panel",SidePanel),customElements.define("k-side-panel-item",SidePanelItem),customElements.define("k-side-panel-label",SidePanelLabel),customElements.define("k-side-panel-menu",SidePanelMenu),customElements.define("k-side-panel-spacer",SidePanelSpacer);export default SidePanel;

package/scripts/update-kempo-css.js

@@ -1,53 +0,0 @@
-import fs from 'fs/promises';
-import path from 'path';
-import { promptUser } from 'kempo-server/utils/cli';
-
-const getFiles = async (dir, extensions) => {
-  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 getFiles(fullPath, extensions));
-    } else if(extensions.some(ext => entry.name.endsWith(ext))){
-      files.push(fullPath);
-    }
-  }
-  return files;
-};
-
-const rootDir = path.resolve('.');
-const docsDir = path.resolve('./docs');
-const srcDir = path.resolve('./src');
-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 docsFiles = await getFiles(docsDir, ['.html']);
-const srcFiles = await getFiles(srcDir, ['.js']);
-const allFiles = [...docsFiles, ...srcFiles];
-
-let updatedCount = 0;
-for(const file of allFiles){
-  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(rootDir, 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/SideMenu.js

@@ -1,178 +0,0 @@
-import ShadowComponent from './ShadowComponent.js';
-import { html, css } from '../lit-all.min.js';
-import { boolTrueFalse } from '../utils/propConverters.js';
-import './FocusCapture.js';
-import './Icon.js';
-
-export default class SideMenu extends ShadowComponent {
-	/* Properties */
-	static properties = {
-		opened: { type: Boolean, reflect: true },
-		overlayClose: { type: Boolean, reflect: true, attribute: 'overlay-close', converter: boolTrueFalse },
-		escClose: { type: Boolean, reflect: true, attribute: 'esc-close', converter: boolTrueFalse },
-		side: { type: String, reflect: true }
-	};
-
-	constructor() {
-		super();
-		this.opened = false;
-		this.overlayClose = true;
-		this.escClose = true;
-		this.side = 'left';
-	}
-
-	/*
-		Event Handlers
-	*/
-	overlayClick = () => {
-		if(this.overlayClose) this.close();
-	}
-
-	handleKeyDown = (e) => {
-		if(this.escClose && e.key === 'Escape') {
-			this.close();
-		}
-	}
-
-	/*
-		Lifecycle Callbacks
-	*/
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		
-		if(changedProperties.has('opened')) {
-			if(this.opened) {
-				document.body.classList.add('no-scroll');
-				document.addEventListener('keydown', this.handleKeyDown);
-				this.dispatchEvent(new CustomEvent('change', { detail: 'open' }));
-				this.dispatchEvent(new CustomEvent('open'));
-			} else {
-				document.body.classList.remove('no-scroll');
-				document.removeEventListener('keydown', this.handleKeyDown);
-				this.dispatchEvent(new CustomEvent('change', { detail: 'close' }));
-				this.dispatchEvent(new CustomEvent('close'));
-			}
-		}
-	}
-
-	/*
-		Methods
-	*/
-	open() {
-		this.opened = true;
-	}
-
-	close() {
-		this.opened = false;
-	}
-
-	toggle() {
-		this.opened ? this.close() : this.open();
-		this.dispatchEvent(new CustomEvent('toggle'));
-	}
-
-	/*
-		Rendering
-	*/
-	render() {
-		return html`
-			<k-focus-capture>
-				<div id="container">
-					<button id="overlay" @click=${this.overlayClick}>
-						<div id="overlay-x"><k-icon name="close"></k-icon></div>
-					</button>
-					<div id="menu">
-						<slot></slot>
-					</div>
-				</div>
-			</k-focus-capture>
-		`;
-	}
-	static styles = css`
-		:host {
-			--bg: var(--c_bg);
-			--width: 20rem;
-
-			position: fixed;
-			top: 0;
-			left: 0;
-			width: 100vw;
-			max-width: 100%;
-			height: 100vh;
-			z-index: 100;
-			pointer-events: none;
-		}
-		:host([opened]) {
-			pointer-events: auto;
-		}
-		k-focus-capture {
-			width: 100%;
-			height: 100%;
-		}
-		#container {
-			position: relative;
-			width: 100%;
-			height: 100%;
-			opacity: 0;
-			transition: opacity var(--animation_ms, 256ms);
-		}
-		:host([opened]) #container {
-			opacity: 1;
-		}
-		#overlay {
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			left: 0;
-			top: 0;
-			background: var(--overlay, rgba(0, 0, 0, 0.5));
-			border: none;
-			padding: 0;
-			cursor: pointer;
-			z-index: 1;
-		}
-		#overlay-x {
-			position: absolute;
-			top: var(--spacer_h);
-			right: var(--spacer_h);
-			font-size: 1.75rem;
-			cursor: pointer;
-			color: var(--tc_light);
-		}
-		:host([overlay-close="false"]) #overlay-x {
-			display: none;
-		}
-		:host([overlay-close="false"]) #overlay {
-			cursor: default;
-		}
-		#menu {
-			position: absolute;
-			width: var(--width);
-			max-width: calc(100vw - 6rem);
-			height: 100vh;
-			overflow-y: auto;
-			left: calc(var(--width) * -1);
-			top: 0;
-			background: var(--bg);
-			transition: left var(--animation_ms, 256ms);
-			padding: var(--menu_padding, var(--spacer));
-			z-index: 2;
-		}
-		:host([opened]) #menu {
-			left: 0;
-		}
-		:host([side="right"]) #menu {
-			left: auto;
-			transition: right var(--animation_ms, 256ms);
-			right: calc(var(--width) * -1);
-		}
-		:host([opened][side="right"]) #menu {
-			right: 0;
-		}
-		:host([side="right"]) #overlay-x {
-			right: auto;
-			left: var(--spacer_h);
-		}
-	`;
-}
-window.customElements.define('k-side-menu', SideMenu);