x4js 1.6.4 → 2.0.1

package/lib/src/components/checkbox/checkbox.ts

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

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

package/lib/src/components/colorinput/colorinput.ts

@@ -0,0 +1,88 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file colorinput.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 } from '@core/component';
+import { isFeatureAvailable } from '@core/core_tools.js';
+import { Color } from '@core/core_colors';
+
+import { BoxProps, HBox } from '../boxes/boxes';
+import { Input } from '../input/input.js';
+import { Button } from '../button/button.js';
+
+
+import "./colorinput.module.scss"
+import icon from "./crosshairs-simple-sharp-light.svg"
+
+//TODO: add swatches
+//TODO: better keyboard handling (selection after cursor)
+
+/**
+ * 
+ */
+
+interface ColorInputProps extends BoxProps {
+	color: Color | string;
+}
+
+/**
+ * 
+ */
+
+export class ColorInput extends HBox<ColorInputProps> {
+	constructor( props: ColorInputProps ) {
+		super( props );
+
+		let swatch: Component;
+		let edit: Input;
+
+		this.setContent( [
+			swatch = new Component( { cls: "swatch" } ),
+			edit = new Input( { type: "text", value: "", spellcheck: false } ),
+
+			isFeatureAvailable("eyedropper") ? new Button( { icon: icon, click: ( ) => {
+				const eyeDropper = new (window as any).EyeDropper();
+				eyeDropper.open( ).then( ( result: any ) => {
+					color = new Color( result.sRGBHex );
+					updateColor( color );
+				});
+			} } ) : null
+		])
+
+		edit.addDOMEvent( "input", ( ) => {
+			const txt = edit.getValue( );
+			const clr = new Color( txt );
+			if( !clr.isInvalid() ) {
+				color = clr;
+				updateColor( color );
+			}
+		});
+
+		const updateColor = ( clr: Color ) => {
+			swatch.setStyleValue( "backgroundColor", clr.toRgbString(false) );
+			edit.setValue( clr.toRgbString(false) );
+		}
+
+		let color: Color;
+		if( props.color instanceof Color ) {
+			color = props.color;
+		}
+		else {
+			color = new Color( props.color );
+		}
+
+		updateColor( color );
+	}
+}

package/lib/src/components/colorinput/crosshairs-simple-sharp-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 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="M479.4 240L384 240l-16 0 0 32 16 0 95.4 0C471.6 383 383 471.6 272 479.4l0-95.4 0-16-32 0 0 16 0 95.4C129 471.6 40.4 383 32.6 272l95.4 0 16 0 0-32-16 0-95.4 0C40.4 129 129 40.4 240 32.6l0 95.4 0 16 32 0 0-16 0-95.4C383 40.4 471.6 129 479.4 240zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>

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

@@ -0,0 +1,133 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file colorpicker.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";
+
+@mixin overlay-shadow {
+	width: 12px;
+	height: 12px;
+	border: 2px solid white;
+	border-radius: 8px;
+	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+}
+
+.x4colorpicker {
+	width: 240px;
+	gap: 4px;
+
+	touch-action: none;
+	outline: none;
+
+	margin: 8px;
+	&:focus {
+		//@include outline-focus;
+	}
+
+	.overlay {
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.x4saturation {
+		width: 100%;
+		
+		height: 140px;
+		position: relative;
+		
+		.thumb {
+			@include overlay-shadow;
+			position: absolute;
+			transform: translate(-50%,50%);
+		}
+	}
+
+	.body {
+		gap: 4px;
+
+		&> .x4vbox {
+			gap: 4px;
+		}
+		
+		.x4hueslider {
+			position: relative;
+			height: 16px;
+			overflow: hidden;
+			
+			background-image: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 212), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0));
+			border: 1px solid var( --color-gray-3 );
+
+			.thumb {
+				@include overlay-shadow;
+				position: absolute;
+				transform: translate(-50%,-50%);
+				top: 50%;
+			}
+	
+		}
+
+		.x4alphaslider {
+			position: relative;
+			height: 16px;
+			overflow: hidden;
+
+			.checkers {
+				background-image: 	linear-gradient(45deg, #ccc 25%, transparent 25%), 
+									linear-gradient(-45deg, #ccc 25%, transparent 25%), 
+									linear-gradient(45deg, transparent 75%, #ccc 75%), 
+									linear-gradient(-45deg, transparent 75%, #ccc 75%);
+				background-size: 8px 8px;
+				background-position: 0 0, 0 20px, 20px -20px, -20px 0;
+			}
+
+			.color {
+				//border-radius: 8px;
+				background-image: linear-gradient(90deg, transparent, rgb(0, 178, 255));
+			}
+
+			.thumb {
+				@include overlay-shadow;
+
+				position: absolute;
+				transform: translate(-50%,-50%);
+				top: 50%;
+			}
+	
+		}
+
+		.swatch {
+			width: 36px;
+			height: 36px;
+
+			.checkers {
+				border-radius: 8px;
+				background-image: 	linear-gradient(45deg, #ccc 25%, transparent 25%), 
+									linear-gradient(-45deg, #ccc 25%, transparent 25%), 
+									linear-gradient(45deg, transparent 75%, #ccc 75%), 
+									linear-gradient(-45deg, transparent 75%, #ccc 75%);
+				background-size: 8px 8px;
+				background-position: 0 0, 0 20px, 20px -20px, -20px 0;
+			}
+
+			.color {
+				border-radius: 8px;
+				background-image: linear-gradient(90deg, transparent, rgb(0, 178, 255));
+			}
+		}
+	}
+}