x4js 2.0.7 → 2.0.9

package/src/components/calendar/calendar.ts

@@ -1,326 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file calendar.ts
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-import { Component, ComponentEvents, ComponentProps, EvChange, Flex } from '@core/component'
-import { date_clone, date_hash, formatIntlDate, Point, unsafeHtml } from "@core/core_tools"
-import { _tr } from '@core/core_i18n';
-import { EventCallback } from '@core/core_events.js';
-
-import { Button } from '../button/button';
-import { Popup } from '../popup/popup';
-import { Label } from '../label/label';
-import { HBox, VBox } from '../boxes/boxes'
-import { Menu, MenuItem } from '../menu/menu';
-
-import "./calendar.module.scss"
-import icon_prev from "./chevron-left-sharp-light.svg";
-import icon_today from "./calendar-check-sharp-light.svg";
-import icon_next from "./chevron-right-sharp-light.svg";
-
-interface CalendarEventMap extends ComponentEvents {
-	change?: EvChange;
-}
-
-
-interface CalendarProps extends ComponentProps {
-	date?: Date;	// initial date to display
-	minDate?: Date;	// minimal date before the user cannot go
-	maxDate?: Date;	// maximal date after the user cannot go
-
-	change?: EventCallback<EvChange>; // shortcut to events: { change: ... }
-}
-
-
-/**
- * default calendar control
- * 
- * fires:
- * 	EventChange ( value = Date )
- */
-
-export class Calendar extends VBox<CalendarProps, CalendarEventMap>
-{
-	private m_date: Date;
-
-	constructor(props: CalendarProps) {
-		super(props);
-
-		this.mapPropEvents( props, 'change' );
-		this.m_date = props.date ? date_clone( props.date ) : new Date();
-
-		this._update( );
-	}
-
-	/** @ignore */
-
-	private _update( ) {
-
-		let month_start = date_clone(this.m_date);
-		month_start.setDate(1);
-
-		let day = month_start.getDay();
-		if (day == 0) {
-			day = 7;
-		}
-
-		month_start.setDate(-day + 1 + 1);
-		let dte = date_clone(month_start);
-
-		let selection = date_hash( this.m_date );
-		let today = date_hash( new Date() );
-
-		let month_end = date_clone(this.m_date);
-		month_end.setDate(1);
-		month_end.setMonth(month_end.getMonth() + 1);
-		month_end.setDate(0);
-
-		let end_of_month = date_hash(month_end);
-
-		let rows: HBox[] = [];
-
-		// month selector
-		let header = new HBox({
-			cls: 'month-sel',
-			content: [
-				new Label({
-					cls: 'month',
-					text: formatIntlDate(this.m_date, 'O'),
-					dom_events: {
-						click: () => this._choose('month')
-					}
-				}),
-				new Label({
-					cls: 'year',
-					text: formatIntlDate(this.m_date, 'Y'),
-					dom_events: {
-						click: () => this._choose('year')
-					}
-				}),
-				new Flex( ),
-				new Button({ icon: icon_prev, click: () => this._next(false) } ),
-				new Button({ icon: icon_today, click: () => this.setDate(new Date()), tooltip: _tr.global.today } ),
-				new Button({ icon: icon_next, click: () => this._next(true) } )
-			]
-		});
-
-		rows.push(header);
-
-		// calendar part
-		let day_names = [];
-
-		// day names
-		// empty week num
-		day_names.push(new HBox({
-			cls: 'weeknum cell',
-		}));
-
-		for (let d = 0; d < 7; d++) {
-			day_names.push(new Label({
-				cls: 'cell',
-				text: _tr.global.day_short[(d + 1) % 7]
-			}));
-		}
-
-		rows.push(new HBox({
-			cls: 'week header',
-			content: day_names
-		}));
-
-		let cmonth = this.m_date.getMonth();
-
-		// weeks
-		let first = true;
-		while (date_hash(dte) <= end_of_month) {
-
-			let days = [
-				new HBox({ cls: 'weeknum cell', content: new Component({ tag: 'span', content: formatIntlDate(dte, 'w') }) })
-			];
-
-			// days
-			for (let d = 0; d < 7; d++) {
-
-				let cls = 'cell day';
-				if (date_hash(dte) == selection) {
-					cls += ' selection';
-				}
-
-				if (date_hash(dte) == today) {
-					cls += ' today';
-				}
-
-				if (dte.getMonth() != cmonth) {
-					cls += ' out';
-				}
-
-				const mkItem = ( dte: Date ) => {
-					return new HBox({
-						cls,
-						flex: 1,
-						content: new Component({
-							cls: "text",
-							content: unsafeHtml( `<span>${formatIntlDate(dte, 'd')}</span>` ),
-						}),
-						dom_events: {
-							click: () => this.select(dte)
-						}
-					})
-				}
-
-				days.push( mkItem( date_clone( dte ) ) );
-
-				dte.setDate(dte.getDate() + 1);
-				first = false;
-			}
-
-			rows.push(new HBox({
-				cls: 'week',
-				flex: 1,
-				content: days
-			}));
-		}
-
-		this.setContent(rows);
-	}
-
-	/**
-	 * select the given date
-	 * @param date 
-	 */
-
-	private select(date: Date) {
-		this.m_date = date;
-		this.fire('change', {value:date} );
-		this._update();
-	}
-
-	/**
-	 * 
-	 */
-
-	private _next(n: boolean) {
-		this.m_date.setMonth(this.m_date.getMonth() + (n ? 1 : -1));
-		this._update();
-	}
-
-	/**
-	 * 
-	 */
-
-	private _choose(type: 'month' | 'year') {
-
-		let items: MenuItem[] = [];
-
-		if (type == 'month') {
-			for (let m = 0; m < 12; m++) {
-				items.push(({
-					text: _tr.global.month_long[m],
-					click: () => { this.m_date.setMonth(m); this._update(); }
-				}));
-			}
-		}
-		else if (type == 'year') {
-
-			let min = this.props.minDate?.getFullYear() ?? 1900;
-			let max = this.props.maxDate?.getFullYear() ?? 2037;
-
-			for (let m = max; m >= min; m--) {
-				items.push({
-					text: '' + m,
-					click: () => { this.m_date.setFullYear(m); this._update(); }
-				});
-			}
-		}
-
-		let menu = new Menu({
-			items
-		});
-
-		let rc = this.getBoundingRect();
-		menu.displayAt(rc.left, rc.top);
-	}
-
-	getDate() {
-		return this.m_date;
-	}
-
-	setDate(date: Date) {
-		this.m_date = date;
-		this._update();
-	}
-}
-
-
-
-
-/**
- * default popup calendar
- * /
-
-export class PopupCalendar extends Popup {
-
-	m_cal: Calendar;
-
-	constructor(props: CalendarProps) {
-		super({ tabIndex: 1 });
-
-		this.enableMask(false);
-
-		this.m_cal = new Calendar(props);
-		this.m_cal.addClass('@fit');
-
-		this.setContent(this.m_cal);
-	}
-
-	// binded
-	private _handleClick = (e: MouseEvent) => {
-		if (!this.dom) {
-			return;
-		}
-
-		let newfocus = <HTMLElement>e.target;
-
-		// child of this: ok
-		if (this.dom.contains(newfocus)) {
-			return;
-		}
-
-		// menu: ok
-		let dest = Component.getElement(newfocus, MenuItem);
-		if (dest) {
-			return;
-		}
-
-		this.close();
-	}
-
-	/ ** @ignore * /
-	show(modal?: boolean, at?: Point ) {
-		x4document.addEventListener('mousedown', this._handleClick);
-		if( at ) {
-			super.displayAt( at.x, at.y, 'top left', undefined, modal );
-		}
-		else {
-			super.show(modal);
-		}
-	}
-
-	/ ** @ignore * /
-	close() {
-		x4document.removeEventListener('mousedown', this._handleClick);
-		super.close();
-	}
-}
-*/

package/src/components/calendar/chevron-left-sharp-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M9.4 256l11.3-11.3 192-192L224 41.4 246.6 64 235.3 75.3 54.6 256 235.3 436.7 246.6 448 224 470.6l-11.3-11.3-192-192L9.4 256z"/></svg>

package/src/components/calendar/chevron-right-sharp-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M310.6 256l-11.3 11.3-192 192L96 470.6 73.4 448l11.3-11.3L265.4 256 84.7 75.3 73.4 64 96 41.4l11.3 11.3 192 192L310.6 256z"/></svg>

package/src/components/checkbox/check.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-	<path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
-	</path>
-</svg>

package/src/components/checkbox/checkbox.module.scss

@@ -1,142 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file checkbox.module.scss
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-@use "../shared.scss";
-
-:root {
-	--checkbox-background-check: var( --accent-background );
-	--checkbox-background-check-hover: var( --accent-background-hover );
-	--checkbox-background-disabled: var( --disabled-color );
-	--checkbox-background-disabled-check: var( --disabled-background );
-	--checkbox-color-disabled: var( --disabled-background );
-	--checkbox-check-border: var( --border );
-	--checkbox-check-border-hover: var( --border-hover );
-}
-
-.x4checkbox {
-	@extend .hbox;
-	
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	margin: 5px;
-	padding: 4px;
-	gap: 4px;
-	cursor: pointer;
-	
-	.inner {
-		height: 1rem;
-		width: 1rem;
-		color: white;
-		position: relative;
-		order: 1;
-		
-		input {
-			appearance: none;
-			outline: none;
-			
-			cursor: pointer;
-			display: block;
-			margin: 0;
-			padding: 0;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			transition: opacity .1s ease;
-
-			&:checked {
-				background-color: var( --checkbox-background-check );
-			}
-
-			&:checked:hover {
-				background-color: var( --checkbox-background-check-hover );
-			}
-
-			&:not(:checked) {
-				border: 1px solid var( --checkbox-check-border );
-			}
-
-			&:not(:checked):hover {
-				border: 1px solid var( --checkbox-check-border-hover );
-			}
-		}
-
-		svg {
-			margin: auto;
-			pointer-events: none;
-			position: absolute;
-			opacity: 0;
-			left: 0;
-			right: 0;
-			top: 0;
-			bottom: 0;
-			width: 100%;
-			height: 50%;
-		}
-
-		&:has(input:checked) {
-			input {
-				opacity: 1;
-			}
-
-			svg {
-				opacity: 1;
-			}
-		}
-	}
-
-	&:focus-within {
-		label #text {
-			text-decoration: underline;
-		}
-	}
-
-	&[disabled] {
-		&, * {
-			cursor: not-allowed;
-		}
-			
-		label {
-		
-			pointer-events: none;
-			color: var( --checkbox-color-disabled );
-		}
-
-		.inner {
-			pointer-events: none;
-			input {
-				background-color: var( --checkbox-background-disabled );
-			
-				&:checked {
-					background-color: var( --checkbox-background-disabled-check );
-				}
-			}
-		}
-	}
-
-	label {
-		text-align: right;
-		cursor: inherit;
-		order: 2;
-	}
-
-	&.left #label {
-		order: 0;
-		text-align: left;
-	}
-}

package/src/components/checkbox/checkbox.ts

@@ -1,125 +0,0 @@
-import { Component, ComponentEvents, ComponentProps, EvChange, makeUniqueComponentId } from '@core/component.js';
-import { EventCallback } from '@core/core_events.js';
-
-import { Input } from '../input/input';
-import { Label } from '../label/label';
-
-import { svgLoader } from '../icon/icon.js';
-
-import "./checkbox.module.scss"
-import icon from "./check.svg";
-
-/**
- * Checkbox events
- */
-
-interface CheckBoxEvents extends ComponentEvents {
-	change?: EvChange;
-}
-
-/**
- * Checkbox properties.
- */
-
-interface CheckboxProps extends ComponentProps {
-	label: string; 			// The text label for the checkbox.
-	checked?: boolean;		// Optional boolean indicating if the checkbox is checked by default.
-	value?: string;			// Optional value associated with the checkbox.
-	change?: EventCallback<EvChange>;
-}
-
-/**
- * Checkbox component that can be checked or unchecked.
- */
-
-export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
-
-	readonly _input: Input;
-
-	/**
-     * Creates an instance of the Checkbox component.
-     * 
-     * @param {CheckboxProps} props - The properties for the checkbox component, including label, checked state, and value.
-     * @example
-     * const checkbox = new Checkbox({ label: 'Accept Terms', checked: true });
-     */
-
-	constructor( props: CheckboxProps ) {
-		super( props );
-
-		const inputId = makeUniqueComponentId( );
-
-		this.mapPropEvents( props, 'change' );
-
-		this.setContent( [
-			new Component( {
-				cls: 'inner',
-				content: [
-					this._input = new Input( { 
-						type:"checkbox", 
-						id: inputId, 
-						checked: props.checked,
-						dom_events: {
-							change: ( ) => this._on_change( ),
-						}
-					})
-				] 
-			}),
-			new Label( { 
-				tag: 'label',
-				text: props.label, 
-				labelFor: inputId, 
-				id: undefined 
-			} ),
-		])
-
-		svgLoader.load( icon ).then( svg => {
-			this.query<Label>( '.inner' ).dom.insertAdjacentHTML( "beforeend", svg );
-		});
-	}
-
-	/**
-	 * check state changed
-	 */
-
-	private _on_change() {
-		this.fire('change', { value:this.getCheck() } );
-	}
-
-	/**
-	 * @return the checked value
-	 */
-
-	public getCheck() {
-		const d = this._input.dom as HTMLInputElement;
-		return d.checked;
-	}
-
-	/**
-	 * change the checked value
-	 * @param {boolean} ck new checked value	
-	 */
-
-	public setCheck(ck: boolean) {
-		const d = this._input.dom as HTMLInputElement;
-		d.checked = ck;
-	}
-
-	/**
-	 * change the checkbox label
-	 * @param text 
-	 */
-
-	public setLabel(text: string) {
-		this.query<Label>('label').setText( text );
-	}
-
-	/**
-	 * toggle the checkbox
-	 */
-
-	public toggle() {
-		this.setCheck( !this.getCheck() );
-	}
-
-}

package/src/components/colorinput/colorinput.module.scss

@@ -1,65 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file colorinput.module.scss
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-:root {
-	--colorinput-btn-background: inherit;
-	--colorinput-btn-color: var( --text-secondary );
-	--colorinput-btn-color-hover: var( --text-primary );	
-}
-
-.x4colorinput {
-	margin: 5px;
-	border-bottom: 1px solid var( --border );
-	outline: none;
-
-	&:focus-within {
-		border-bottom-color: var( --border-focus );
-	}
-
-	.swatch {
-		margin: 4px;
-		width: 1rem;
-		height: 1rem;
-	}
-
-	input {
-		outline: none;
-		margin: 0;
-		height: 100%;
-		flex-grow: 1;
-	}
-
-	.x4button {
-		margin: 0;
-		padding: 0;
-		outline: none;
-		background-color: var( --combobox-btn-background );
-		color: var( --colorinput-btn-color );
-
-		#icon {
-			color: var( --colorinput-btn-color );
-		}
-
-		&:hover, &:hover #icon {
-			color: var( --colorinput-btn-color-hover );
-		}
-
-		&:focus {
-			//background-color: var( --color-30 );
-			//color: var( --color-10 );
-		}
-	}
-}