x4js 2.2.47 → 2.2.50

package/README.md

@@ -2,11 +2,12 @@
 **A TypeScript framework for people who build applications, not markup.**
 
 ## Home page
-see [home](https://x4js.org)
+see [X4 home page](https://x4js.org)
 
 ## API Documentation
-see [API](https://rlibre.github.io/x4/index.html)
-see [AI](./aicontext.md)
+see [GitHib](https://rlibre.github.io/x4/index.html)
+
+see [AI context](./aicontext.md)
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.47",
+  "version": "2.2.50",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",
@@ -35,6 +35,7 @@
   "devDependencies": {
     "typescript": "^5.8.3",
     "typedoc": "^0.28.19",
-    "typedoc-plugin-markdown": "^4.12.0"
+    "typedoc-plugin-markdown": "latest",
+    "typedoc-plugin-missing-exports": "latest"
   }
 }

package/src/components/boxes/boxes.module.scss

@@ -19,6 +19,7 @@
 .x4box {
 	min-width: 0;
 	min-height: 0;
+	flex-shrink: 0;
 }
 
 .x4hbox {

package/src/components/breadcrumb/breadcrumb.ts

@@ -55,6 +55,13 @@ interface BreadcrumbsProps extends BoxProps{
 
 /**
  * 
+ * @cssvar
+ * ```
+ * --breadcrumbs-background
+ * --breadcrumbs-icon-color
+ * --breadcrumbs-link-color
+ * --breadcrumbs-active-color
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/btngroup/btngroup.module.scss

@@ -22,7 +22,7 @@
 	align-content: start;
 	margin: 5px;
 	gap: 4px;
-
+	overflow: hidden;
 	background: var( --btngroup-background );
 
 	&.align-right {

package/src/components/button/button.ts

@@ -24,6 +24,7 @@ import { Icon } from "../icon/icon"
 import "./button.module.scss";
 
 
+
 /**
  * Button events
  */
@@ -76,13 +77,22 @@ export interface ButtonProps extends ComponentProps {
 /**
  * Represents a clickable button component.
  * 
- * Generates the CSS class **x4button** based on the class name.
- * The button can contain an optional icon and label, supports keyboard activation,
- * and may trigger auto-repeated click events while pointer is held down.
- * 
+ * @cssvar
+ * ```
+ * 	--button-background
+ * 	--button-color
+ * 	--button-background-hover
+ * 	--button-color-hover
+ * 	--button-background-active
+ * 	--button-color-active
+ * 	--button-background-focus
+ * 	--button-color-focus
+ * 	--button-background-disabled
+ * 	--button-color-disabled
+ * 	--button-icon-color
+ * ```
  */
 
-
 @class_ns( "x4" )
 export class Button extends Component<ButtonProps,ButtonEvents> {
 

package/src/components/calendar/calendar.ts

@@ -48,7 +48,25 @@ interface CalendarProps extends ComponentProps {
  * default calendar control
  * 
  * fires:
- * 	EventChange ( value = Date )
+ * 		EventChange ( value = Date )
+ * 
+ * @cssvar
+ * ```
+ * --calendar-btn-background
+ * --calendar-btn-color
+ * --calendar-btn-color
+ * --calendar-week-color
+ * --calendar-week-color-hover
+ * --calendard-day-background-hover
+ * --calendard-day-color-hover
+ * --calendar-sel-background
+ * --calendar-sel-color
+ * --calendar-today-background
+ * --calendar-today-color
+ * --calendar-today-border
+ * --calendar-header-color
+ * --calendar-out-color
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/checkbox/checkbox.ts

@@ -31,6 +31,17 @@ interface CheckboxProps extends ComponentProps {
 
 /**
  * Checkbox component that can be checked or unchecked.
+ * 
+ * @cssvar
+ * ```
+ * --checkbox-background-check
+ * --checkbox-background-check-hover
+ * --checkbox-background-disabled
+ * --checkbox-background-disabled-check
+ * --checkbox-color-disabled
+ * --checkbox-check-border
+ * --checkbox-check-border-hover
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/colorinput/colorinput.ts

@@ -38,7 +38,12 @@ interface ColorInputProps extends BoxProps {
 }
 
 /**
- * 
+ * @cssvar
+ * ```
+ * --colorinput-btn-background
+ * --colorinput-btn-color
+ * --colorinput-btn-color-hover
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/colorpicker/colorpicker.ts

@@ -163,7 +163,7 @@ export class Saturation extends Box<BoxProps,CommonEvents> {
 
 
 /**
- * 
+ * @internal
  */
 
 @class_ns( "x4" )
@@ -240,7 +240,7 @@ class HueSlider extends Box<BoxProps,CommonEvents> {
 
 
 /**
- * 
+ * @internal
  */
 
 @class_ns( "x4" )

package/src/components/combobox/combobox.ts

@@ -87,6 +87,20 @@ interface ComboboxProps extends Omit<ComponentProps,"content"> {
 	selectionChange?: EventCallback<EvSelectionChange>,
 }
 
+/**
+ * @cssvar
+ * ```
+ * --dropdown-border
+ * --dropdown-background
+ * --combobox-border
+ * --combobox-border-focus
+ * --combobox-btn-background
+ * --combobox-btn-color
+ * --combobox-btn-color-hover
+ * --combo-tree-indent
+ * ```
+ */
+
 @class_ns( "x4" )
 export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 

package/src/components/dialog/dialog.ts

@@ -50,7 +50,11 @@ interface DialogEvents extends PopupEvents {
 }
 
 /**
- * 
+ * @cssvar
+ * ```
+ * --color-dialog-caption
+ * --color-dialog-caption-text
+ * ```
  */
 
 @class_ns("x4")
@@ -85,7 +89,7 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 								this.fire("btnclick", { button: props.closable } );
 							}
 							else {
-								this.close() 
+								this.fire("btnclick", { button: props.buttons[0] } );
 							}
 						}
 					}) : null,

package/src/components/filedrop/filedrop.ts

@@ -36,6 +36,16 @@ interface FileDialogProps extends ComponentProps {
 	callback: LoadCallback;
 }
 
+/**
+ * @cssvar
+ * ```
+ * --filedrop-border
+ * --filedrop-icon-color
+ * --filedrop-border-drop-hover
+ * --filedrop-icon-color-hover
+ * ```
+ */
+
 export class FileDialog extends Component {
 
 	constructor( props: FileDialogProps ) {

package/src/components/form/form.ts

@@ -29,7 +29,10 @@ export interface FormProps extends BoxProps {
 type ValidationFn = ( values: FormValues, is_valid: boolean ) => boolean;
 
 /**
- * 
+ * @cssvar
+ * ```
+ * --form--background
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/gauge/gauge.ts

@@ -40,6 +40,15 @@ export const simpleColorStop = [
 	'var(--gauge-base-color)'
 ]
 
+/**
+ * @cssvar
+ * ```
+ * --gauge-base-color
+ * --gauge-needle-back
+ * --gauge-needle-dot
+ * ```
+ */
+
 @class_ns( "x4" )
 export class Gauge extends Component<GaugeProps> {
 

package/src/components/gridview/gridview.ts

@@ -95,7 +95,34 @@ export interface GridviewProps extends ComponentProps {
  */
 
 /**
- * 
+ * @cssvar
+ * ```
+ * --gridview-background
+ * --gridview-border
+ * --gridview-header-cell-background
+ * --gridview-header-cell-color
+ * --gridview-header-cell-vline
+ * --gridview-header-cell-border
+ * --grid-check-background
+ * --grid-check-color
+ * --grid-check-background-hover
+ * --grid-check-color-hover
+ * --grid-perc-background
+ * --grid-perc-color
+ * --grid-perc-background-hover
+ * --grid-perc-color-hover
+ * --gridview-cell-color
+ * --gridview-cell-color-sel
+ * --gridview-cell-vline
+ * --gridview-row-background
+ * --gridview-row-odd-background
+ * --gridview-row-border
+ * --gridview-row-background-hover
+ * --gridview-row-background-hover-sel
+ * --gridview-row-background-sel
+ * --gridview-row-color-sel
+ * --gridview-fix-border
+ * ```
  */
 
 @class_ns("x4")

package/src/components/header/header.ts

@@ -20,13 +20,13 @@ interface HeaderProps extends Omit<ComponentProps,"content"> {
 
 /**
  * by default when a header item is resized, the 'target' style '--{name}-width' is updated
- * if you listbox has a header and 3 cols named A, B, C then in your css, use
  * 
- * .my-listbox {
- *    --A-width: 10px;
- *    --B-width: 50px;
- *    --C-width: 100px;
- * }
+ * @cssvar
+ * ```
+ * --header-background-hover
+ * --header-sizer-hover
+ * --header-color
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/image/image.ts

@@ -32,6 +32,7 @@ interface ImageEvents extends ComponentEvents {
 	change: EvDropChange;
 	clear: CoreEvent;
 }
+
 export interface ImageProps extends ComponentProps {
 	src: string;
 	fit?: "contain" | "cover" | "fill" | "scale-down";
@@ -49,6 +50,10 @@ export interface ImageProps extends ComponentProps {
 
 /**
  * 
+ * @cssvar
+ * ```
+ * --image-border-drop-hover
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/input/input.module.scss

@@ -15,6 +15,9 @@
  **/
 
 :root {
+    --input-background: rgba(255, 255, 255, 0.6);
+    --input-color: black;
+
 	--input-sel-background: var( --accent-background );
 	--input-sel-color: var( --accent-color );
 	--input-placeholder: var( --disabled-background );
@@ -28,6 +31,8 @@ input.x4input {
 	outline: none;
 	
 	border: none;
+    background-color: var( --input-background );
+    color: var( --input-color );
 
 	&::selection {
 		background-color: var( --input-sel-background );

package/src/components/input/input.ts

@@ -198,6 +198,15 @@ interface InputEvents extends ComponentEvent {
  *   change: (e) => console.log("Checked:", e.value)
  * });
  * ```
+ * 
+ * @cssvar
+ * ```
+ * --input-sel-background
+ * --input-sel-color
+ * --input-placeholder
+ * --input-error
+ * --input-checkbox-color
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/keyboard/keyboard.ts

@@ -99,6 +99,14 @@ interface KeyboardProps extends BoxProps {
 
 }
 
+/**
+ * @cssvar
+ * ```
+ * --keyboard-key-background
+ * --keyboard-hilite-color
+ * --keyboard-zoom
+ * ```
+ */
 @class_ns( "x4" )
 export class Keyboard extends HBox<KeyboardProps>
 {

package/src/components/label/label.ts

@@ -28,7 +28,13 @@ export interface LabelProps extends ComponentProps {
 }
 
 /**
- * 
+ * @cssvar
+ * ```
+ * --label-background
+ * --label-color
+ * --label-icon-color
+ * --label-color-disa
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/link/link.ts

@@ -41,6 +41,10 @@ interface LinkProps extends ComponentProps {
 	click?: EventCallback<EvClick>;
 }
 
+/**
+ * 
+ */
+
 @class_ns( "x4" )
 export class Link extends Component<LinkProps,LinkEvents> {
 	constructor( props: LinkProps ) {

package/src/components/listbox/listbox.ts

@@ -75,7 +75,20 @@ export interface ListboxProps extends Omit<ComponentProps,'content'> {
 }
 
 /**
- * 
+ * @cssvar
+ * ```
+ * --listbox-item-color
+ * --listbox-icon-color
+ * --listbox-item-color-disabled
+ * --listbox-item-color-sel
+ * --listbox-item-background-sel
+ * --listbox-item-color-sel-disabled
+ * --listbox-item-color-hover
+ * --listbox-item-background-hover
+ * --listbox-background
+ * --listbox-border
+ * --listbox-border-focus
+ * ```
  */
 
 @class_ns( "x4" )
@@ -485,30 +498,30 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 
 	defaultRenderer( item: ListItem ): Component {
 
-		const mk_col = ( _: any, index: number ) => {
-			const c = item.sub_cols[index];
+		const mk_col = ( c: any, index: number ) => {
 			if( c===undefined || c===null ) { 
 				return null;
 			}
 
 			if( c instanceof Component ) {
+				c.addClass( "column" );
 				return c;
 			}
 				
 			return new SimpleText( { cls: `column ref-c${index+2}`, text: c } )
 		}
 
-		let cols: Component[] = null;
+		const content = [
+			new Label( { cls: `column ref-c1`, icon: item.iconId, text: item.text } ),
+		];
+
 		if( item.sub_cols ) {
-			cols = item.sub_cols.map( mk_col );
+			content.push( ...(item.sub_cols.map( mk_col )) );
 		}
 
 		return new HBox( {
 			cls: item.cls,
-			content: [
-				new Label( { cls: `column ref-c1`, icon: item.iconId, text: item.text } ),
-				...cols,
-			],
+			content			
 		} )
 	}
 

package/src/components/menu/menu.ts

@@ -47,7 +47,16 @@ export interface MenuProps extends Omit<PopupProps,"content"> {
 }
 
 /**
- * 
+ * @cssvar
+ * ```
+ * --menu-background
+ * --menu-border
+ * --menuitem-color
+ * --menuitem-background-active
+ * --menuitem-color-active
+ * --menuitem-background-hover
+ * --menuitem-color-hover
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/messages/messages.ts

@@ -29,6 +29,12 @@ export interface MessageBoxProps extends DialogProps {
 
 /**
  * 
+ * @cssvar
+ * ```
+ * --msgbox-caption-background
+ * --msgbox-caption-color
+ * --msgbox-icon-color
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/notification/notification.ts

@@ -43,6 +43,19 @@ interface NotificationProps extends ComponentProps {
 
 /**
  * 
+ * @example:
+ * const not = new Notification( { title: "Yooo", text: "You win !", mode: "danger" })
+ * not.display( 3000 )
+ * 
+ * 
+ * @cssvar
+ * ```
+ * --notification-border
+ * --notification-background
+ * --notification-icon-default
+ * --notification-icon-success
+ * --notification-icon-danger
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/panel/panel.ts

@@ -29,7 +29,11 @@ interface PanelProps extends ComponentProps {
 }
 
 /**
- * 
+ * @cssvar
+ * ```
+ * --panel-border
+ * --panel-title-color
+ * ```
  */
 
 @class_ns( "x4" )

package/src/components/popup/popup.module.scss

@@ -32,6 +32,7 @@
 	}
 }
 
+//<to remove
 .x4popup.center {
 	left: 50%;
 	top: 50%;