x4js 1.6.4 → 2.0.1

package/lib/src/components/calendar/calendar.module.scss

@@ -0,0 +1,163 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file calendar.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 {
+	--calendar-btn-background: inherit;
+	--calendar-btn-color: var( --text-secondary );
+	--calendar-btn-color-hover: var( --text-primary );
+
+	--calendar-week-color: var( --accent-background );
+	--calendar-week-color-hover: var( --accent-background-hover );
+
+	--calendard-day-background-hover: var( --accent-background-hover );
+	--calendard-day-color-hover: var( --accent-color-hover );
+
+	--calendar-sel-background: var( --accent-background );
+	--calendar-sel-color: var( --accent-color );
+
+	--calendar-today-background: var( --alert-background );
+	--calendar-today-color: var( --alert-color );
+	--calendar-today-border: var( --accent-background );
+
+	--calendar-header-color: var( --text-primary );
+	--calendar-out-color: var( --disabled-color-dark );
+}
+
+.x4calendar {
+	border: 1px solid var( --border );
+	padding: 4px;
+	
+	.month-sel {
+		height: 2em;
+		align-items: center;
+		padding-left: 2em;
+
+		.month {
+			padding-right: 4px;
+		}
+
+		.year {
+			cursor: pointer;
+		}
+
+		.month, 
+		.year {
+			cursor: pointer;
+			&:hover {
+				text-decoration: underline;		
+			}
+		}
+				
+		.x4label {
+			font-weight: bold;
+		}
+
+		.x4button {
+			height: auto;
+			background-color: var( --calendar-btn-background );
+			color: var( --calendar-btn-color );
+
+			&:hover {
+				color: var( --calendar-btn-color-hover );
+			}
+		}
+
+		margin-bottom: 8px;
+	}
+
+	.week {
+		@extend .flex;
+		align-items: center;
+		padding: 2px;
+				
+		.cell {
+			@extend .flex;
+			min-width: 28px;
+			min-height: 28px;
+			
+			color: var( --gray-900 );
+			text-align: center;
+			
+			.text {
+				@extend .hbox;
+
+				transition: background-color 0.3s, color 0.3s;
+				justify-content: center;
+				border: 1px solid transparent;
+				margin: auto;
+				border-radius: 14px;
+				width: 28px;
+				height: 28px;
+			}
+		}
+		
+		.today {
+			.text {
+				font-weight: bold;
+				background-color: var( --calendar-today-background );
+				color: var( --calendar-today-color );
+				//border-color: var( --calendar-today-border );
+			}
+		}
+
+		.selection {
+			.text {
+				background-color: var( --calendar-sel-background );
+				color: var( --calendar-sel-color );
+			}
+		}
+
+		.weeknum {
+			width: 2em;
+			color: var( --calendar-week-color );
+			font-size: 70%;
+		}
+
+		&:hover .weeknum {
+			font-weight: bold;
+		}
+
+		.day {
+			cursor: pointer;
+		}
+
+		.out {
+			color: var( --calendar-out-color );
+			font-size: 80%;
+		}
+
+		.day:hover {
+			.text {
+				background-color: var( --calendard-day-background-hover );
+				color: var( --calendard-day-color-hover );
+			}
+		}
+	}
+
+	.header {
+		.cell {
+			color: var( --calendar-header-color );
+			height: 1.5em;
+			justify-content: center;
+		}
+
+		&:hover {
+			background-color: inherit;
+		}
+	}	
+}

package/lib/src/{calendar.ts → components/calendar/calendar.ts}

@@ -1,53 +1,41 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|  
-*  /__/\__\   |_|
-*        
-* @file calendar.ts
-* @author Etienne Cochard 
-*
-* Copyright (c) 2019-2023 R-libre ingenierie
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy 
-* of this software and associated documentation files (the "Software"), to deal 
-* in the Software without restriction, including without limitation the rights 
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
-* of the Software, and to permit persons to whom the Software is furnished to do so, 
-* subject to the following conditions:
-* The above copyright notice and this permission notice shall be included in all copies
-* or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
-* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
-* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
-* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-**/
-
-import { x4document } from './x4dom'
-
-import { Button } from './button';
-import { Popup } from './popup';
-import { Component, CProps, ContainerEventMap, Flex } from './component'
-import { EvChange, EventCallback } from './x4events'
-import { Point } from "./tools"
-
-import { _tr } from './i18n';
-import { Label } from './label';
-import { HLayout, VLayout } from './layout'
-import { date_hash, date_clone, formatIntlDate } from './tools'
-import { Menu, MenuItem } from './menu';
-
-
-interface CalendarEventMap extends ContainerEventMap {
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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 CProps<CalendarEventMap> {
+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
@@ -63,7 +51,7 @@ interface CalendarProps extends CProps<CalendarEventMap> {
  * 	EventChange ( value = Date )
  */
 
-export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
+export class Calendar extends VBox<CalendarProps, CalendarEventMap>
 {
 	private m_date: Date;
 
@@ -71,12 +59,14 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 		super(props);
 
 		this.mapPropEvents( props, 'change' );
-		this.m_date = props.date?.clone() ?? new Date();
+		this.m_date = props.date ? date_clone( props.date ) : new Date();
+
+		this._update( );
 	}
 
 	/** @ignore */
 
-	render(props: CalendarProps) {
+	private _update( ) {
 
 		let month_start = date_clone(this.m_date);
 		month_start.setDate(1);
@@ -89,7 +79,8 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 		month_start.setDate(-day + 1 + 1);
 		let dte = date_clone(month_start);
 
-		let today = this.m_date.hash();
+		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);
@@ -98,10 +89,10 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 
 		let end_of_month = date_hash(month_end);
 
-		let rows: HLayout[] = [];
+		let rows: HBox[] = [];
 
 		// month selector
-		let header = new HLayout({
+		let header = new HBox({
 			cls: 'month-sel',
 			content: [
 				new Label({
@@ -118,9 +109,10 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 						click: () => this._choose('year')
 					}
 				}),
-				new Flex(),
-				new Button({ text: '<', click: () => this._next(false) } ),
-				new Button({ text: '>', click: () => this._next(true) } )
+				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) } )
 			]
 		});
 
@@ -131,19 +123,18 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 
 		// day names
 		// empty week num
-		day_names.push(new HLayout({
+		day_names.push(new HBox({
 			cls: 'weeknum cell',
 		}));
 
 		for (let d = 0; d < 7; d++) {
 			day_names.push(new Label({
 				cls: 'cell',
-				flex: 1,
 				text: _tr.global.day_short[(d + 1) % 7]
 			}));
 		}
 
-		rows.push(new HLayout({
+		rows.push(new HBox({
 			cls: 'week header',
 			content: day_names
 		}));
@@ -155,14 +146,18 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 		while (date_hash(dte) <= end_of_month) {
 
 			let days = [
-				new HLayout({ cls: 'weeknum cell', content: new Component({ tag: 'span', content: formatIntlDate(dte, 'w') }) })
+				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 (dte.hash() == today) {
+				if (date_hash(dte) == selection) {
+					cls += ' selection';
+				}
+
+				if (date_hash(dte) == today) {
 					cls += ' today';
 				}
 
@@ -171,12 +166,12 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 				}
 
 				const mkItem = ( dte: Date ) => {
-					return new HLayout({
+					return new HBox({
 						cls,
 						flex: 1,
 						content: new Component({
-							tag: 'span',
-							content: formatIntlDate(dte, 'd'),
+							cls: "text",
+							content: unsafeHtml( `<span>${formatIntlDate(dte, 'd')}</span>` ),
 						}),
 						dom_events: {
 							click: () => this.select(dte)
@@ -184,13 +179,13 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 					})
 				}
 
-				days.push( mkItem( dte.clone() ) );
+				days.push( mkItem( date_clone( dte ) ) );
 
 				dte.setDate(dte.getDate() + 1);
 				first = false;
 			}
 
-			rows.push(new HLayout({
+			rows.push(new HBox({
 				cls: 'week',
 				flex: 1,
 				content: days
@@ -207,8 +202,8 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 
 	private select(date: Date) {
 		this.m_date = date;
-		this.emit('change', EvChange(date));
-		this.update();
+		this.fire('change', {value:date} );
+		this._update();
 	}
 
 	/**
@@ -217,7 +212,7 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 
 	private _next(n: boolean) {
 		this.m_date.setMonth(this.m_date.getMonth() + (n ? 1 : -1));
-		this.update();
+		this._update();
 	}
 
 	/**
@@ -230,22 +225,22 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 
 		if (type == 'month') {
 			for (let m = 0; m < 12; m++) {
-				items.push(new MenuItem({
+				items.push(({
 					text: _tr.global.month_long[m],
-					click: () => { this.m_date.setMonth(m); this.update(); }
+					click: () => { this.m_date.setMonth(m); this._update(); }
 				}));
 			}
 		}
 		else if (type == 'year') {
 
-			let min = this.m_props.minDate?.getFullYear() ?? 1900;
-			let max = this.m_props.maxDate?.getFullYear() ?? 2037;
+			let min = this.props.minDate?.getFullYear() ?? 1900;
+			let max = this.props.maxDate?.getFullYear() ?? 2037;
 
 			for (let m = max; m >= min; m--) {
-				items.push(new MenuItem({
+				items.push({
 					text: '' + m,
-					click: () => { this.m_date.setFullYear(m); this.update(); }
-				}));
+					click: () => { this.m_date.setFullYear(m); this._update(); }
+				});
 			}
 		}
 
@@ -257,19 +252,22 @@ export class Calendar extends VLayout<CalendarProps, CalendarEventMap>
 		menu.displayAt(rc.left, rc.top);
 	}
 
-	get date() {
+	getDate() {
 		return this.m_date;
 	}
 
-	set date(date: Date) {
+	setDate(date: Date) {
 		this.m_date = date;
-		this.update();
+		this._update();
 	}
 }
 
+
+
+
 /**
  * default popup calendar
- */
+ * /
 
 export class PopupCalendar extends Popup {
 
@@ -308,7 +306,7 @@ export class PopupCalendar extends Popup {
 		this.close();
 	}
 
-	/** @ignore */
+	/ ** @ignore * /
 	show(modal?: boolean, at?: Point ) {
 		x4document.addEventListener('mousedown', this._handleClick);
 		if( at ) {
@@ -319,10 +317,10 @@ export class PopupCalendar extends Popup {
 		}
 	}
 
-	/** @ignore */
+	/ ** @ignore * /
 	close() {
 		x4document.removeEventListener('mousedown', this._handleClick);
 		super.close();
 	}
-
-}
+}
+*/

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

@@ -0,0 +1 @@
+<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/lib/src/components/calendar/chevron-right-sharp-light.svg

@@ -0,0 +1 @@
+<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/lib/src/components/checkbox/check.svg

@@ -0,0 +1,4 @@
+<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/lib/src/components/checkbox/checkbox.module.scss

@@ -0,0 +1,142 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @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;
+	}
+}