x4js 2.0.12 → 2.0.14

package/lib/src/components/select/select.ts

@@ -0,0 +1,134 @@
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|.2
+ * 
+ * @file select.ts
+ * @author Etienne Cochard 
+ * 
+ * @copyright (c) 2025 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 { EventCallback } from '../../core/core_events.js';
+import { Component, ComponentEvent, ComponentProps, EvChange, EvFocus  } from '../../core/component';
+import { class_ns } from '../../core/core_tools';
+
+import { ListItem } from '../components';
+
+import "./select.module.scss"
+
+/**
+ * 
+ */
+
+export interface SelectProps extends ComponentProps {
+	name?: string;
+	value: string;
+	items: ListItem[];
+	multiple?: boolean;
+	change?: EventCallback<EvChange>;
+	focus?: EventCallback<EvFocus>;
+}
+
+interface SelectEvents extends ComponentEvent {
+	focus: EvFocus;
+	change: EvChange;
+}
+
+
+/**
+ * simple select
+ */
+
+@class_ns( "x4" )
+export class Select extends Component<SelectProps,SelectEvents> {
+
+	constructor( props: SelectProps ) {
+		super( { tag: "select", ...props } );
+
+		this.mapPropEvents( props, "focus", "change" );
+		if( props.name ) {
+			this.setAttribute( "name", props.name );
+		}
+
+		this.setItems( props.items );
+		
+		this.addDOMEvent( "blur", ( e ) => { this.on_focus(e,true);} );
+		this.addDOMEvent( "focus", ( e ) => { this.on_focus(e,false);} );
+		this.addDOMEvent( "input", ( e ) => { this.on_change(e as InputEvent); });
+
+		if( props.multiple ) {
+			this.setAttribute( "multiple", true );
+		}
+
+		if( props.value ) {
+			this.setValue( props.value );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	private on_focus( ev: FocusEvent, focus_out: boolean ) {
+		const event: EvFocus = { focus_out }
+		this.fire( "focus", event );
+
+		if( event.defaultPrevented ) {
+			ev.preventDefault( );
+		}
+	}
+
+	/**
+	 * 
+	 */
+
+	private on_change( ev: InputEvent ) {
+
+		const event: EvChange = { value: this.getValue() };
+		this.fire( "change", event );
+
+		if( event.defaultPrevented ) {
+			ev.preventDefault( );
+		}
+	}
+
+	/**
+	 * 
+ 	 */
+
+	setItems( items: ListItem[] ) {
+		this.setContent( items.map( x => {
+			return new Component( {
+				tag: "option",
+				attrs: { value: x.id },
+				content: x.text,
+			});
+		} ));
+	}
+
+	/**
+	 * @returns 
+	 */
+
+	public getValue( ) {
+		return (this.dom as HTMLSelectElement).value;
+	}
+
+	/**
+	 * 
+	 * @param value 
+	 */
+	
+	public setValue( value: string ) {
+		(this.dom as HTMLSelectElement).value = value+"";
+	}
+}
+
+

package/lib/src/components/shared.scss

@@ -1,76 +1,137 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file shared.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.
- **/
-
-.box {
-	position: relative;
-}
-
-.hbox {
-	@extend .box;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
-
-.vbox {
-	@extend .box;
-	display: flex;
-	flex-direction: column;
-}
-
-
-.fit {
-	position: absolute;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-}
-
-
-.rel-fit {
-	position: relative;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-}
-
-.flex {
-	flex-grow: 1;
-	flex-shrink: 0;
-	flex-basis: 0;
-	min-width: 0;
-}
-
-
-// from tailwind
-
-.shadow-sm {
-	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-
-.shadow-md {
-	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-}
-
-.shadow-lg {
-	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-}
-
-.shadow-xl {
-	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file shared.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.
+ **/
+
+.box {
+	position: relative;
+}
+
+.hbox {
+	@extend .box;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.vbox {
+	@extend .box;
+	display: flex;
+	flex-direction: column;
+}
+
+
+.fit {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+}
+
+
+.rel-fit {
+	position: relative;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+}
+
+.flex {
+	flex-grow: 1;
+	flex-shrink: 0;
+	flex-basis: 0;
+	min-width: 0;
+}
+
+
+// from tailwind
+
+.shadow-sm {
+	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.shadow-md {
+	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+.shadow-lg {
+	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.shadow-xl {
+	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+}
+
+
+@keyframes rotating {
+	from {
+	  transform: rotate(0deg);
+	}
+	to {
+	  transform: rotate(360deg);
+	}
+}
+
+@keyframes shaking {
+    0% {
+        transform: rotate(-15deg)
+    }
+
+    4% {
+        transform: rotate(15deg)
+    }
+
+    8%,24% {
+        transform: rotate(-18deg)
+    }
+
+    12%,28% {
+        transform: rotate(18deg)
+    }
+
+    16% {
+        transform: rotate(-22deg)
+    }
+
+    20% {
+        transform: rotate(22deg)
+    }
+
+    32% {
+        transform: rotate(-12deg)
+    }
+
+    36% {
+        transform: rotate(12deg)
+    }
+
+    40% {
+        transform: rotate(0deg)
+    }
+}
+
+
+.x4rotate {
+	animation: rotating 2s linear infinite;
+}
+
+.x4shake {
+	animation-name: shaking;
+    animation-duration: 5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-direction: reverse;
+}

package/lib/src/components/sizers/sizer.module.scss

@@ -1,90 +1,90 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file sizer.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.
- **/
-
-
-.x4csizer {
-	position: absolute;
-
-	@mixin horz {
-		left: 0;
-		right: 0;
-		height: 8px;
-		z-index: 10;
-		cursor: ns-resize;
-	}
-
-	&.top {
-		@include horz;
-		top: 0;
-	}
-
-	&.bottom {
-		@include horz;
-		bottom: 0;
-	}
-
-	@mixin vert {
-		top: 0;
-		bottom: 0;
-		width: 8px;
-		z-index: 10;
-		cursor: ew-resize;
-	}
-
-	&.left {
-		@include vert;
-		left: 0;
-	}
-
-	&.right {
-		@include vert;
-		right: 0;
-	}
-
-	@mixin corner {
-		width: 8px;
-		height: 8px;
-		z-index: 11;
-	}
-
-	&.top-left {
-		@include corner;
-		left: 0;
-		top: 0;
-		cursor: nw-resize;
-	}
-
-	&.top-right {
-		@include corner;
-		right: 0;
-		top: 0;
-		cursor: ne-resize;
-	}
-
-	&.bottom-left {
-		@include corner;
-		left: 0;
-		bottom: 0;
-		cursor: ne-resize;
-	}
-
-	&.bottom-right {
-		@include corner;
-		right: 0;
-		bottom: 0;
-		cursor: nw-resize;
-	}
+/** 
+ *  ___  ___ __
+ *  \  \/  /  / _
+ *   \    /  /_| |_
+ *   /    \____   _|  
+ *  /__/\__\   |_|
+ * 
+ * @file sizer.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.
+ **/
+
+
+.x4csizer {
+	position: absolute;
+
+	@mixin horz {
+		left: 0;
+		right: 0;
+		height: 8px;
+		z-index: 10;
+		cursor: ns-resize;
+	}
+
+	&.top {
+		@include horz;
+		top: 0;
+	}
+
+	&.bottom {
+		@include horz;
+		bottom: 0;
+	}
+
+	@mixin vert {
+		top: 0;
+		bottom: 0;
+		width: 8px;
+		z-index: 10;
+		cursor: ew-resize;
+	}
+
+	&.left {
+		@include vert;
+		left: 0;
+	}
+
+	&.right {
+		@include vert;
+		right: 0;
+	}
+
+	@mixin corner {
+		width: 8px;
+		height: 8px;
+		z-index: 11;
+	}
+
+	&.top-left {
+		@include corner;
+		left: 0;
+		top: 0;
+		cursor: nw-resize;
+	}
+
+	&.top-right {
+		@include corner;
+		right: 0;
+		top: 0;
+		cursor: ne-resize;
+	}
+
+	&.bottom-left {
+		@include corner;
+		left: 0;
+		bottom: 0;
+		cursor: ne-resize;
+	}
+
+	&.bottom-right {
+		@include corner;
+		right: 0;
+		bottom: 0;
+		cursor: nw-resize;
+	}
 }