flinker-dom 1.1.16 → 1.1.18

package/dist/esm/components.js

@@ -162,6 +162,18 @@ export class UIComponent {
         this.dom.addEventListener('mousedown', callback);
         return this;
     }
+    onMouseOver(callback) {
+        this.dom.addEventListener('mouseover', callback);
+        return this;
+    }
+    onMouseOut(callback) {
+        this.dom.addEventListener('mouseout', callback);
+        return this;
+    }
+    onMouseLeave(callback) {
+        this.dom.addEventListener('mouseleave', callback);
+        return this;
+    }
     onKeyUp(callback) {
         this.dom.addEventListener('keyup', callback);
         return this;

package/dist/esm/core.js

@@ -141,11 +141,13 @@ const RuleBuilder = () => {
         setValue('-webkit-user-select', value ? 'text' : 'none', false);
     };
     operator.target = (value) => { setValue('target', value); };
+    operator.bg = (value) => { setValue('background', value); };
     operator.bgImage = (value) => { setValue('background-image', value); };
     operator.bgImageSrc = (value) => { setValue('background-image', 'url(' + value + ')'); };
     operator.bgImageRepeat = (value) => { setValue('background-repeat', value); };
     operator.bgImageSize = (value) => { setValue('background-size', value); };
     operator.bgImageAttachment = (value) => { setValue('background-attachment', value); };
+    operator.maskImage = (value) => { setValue('mask-image', value); };
     operator.animate = (value) => { setValue('transition', value); };
     operator.animateAll = (value) => { setValue('transition', 'all ' + value); };
     operator.pseudo = (values) => {

package/dist/esm/processor.js

@@ -1,7 +1,8 @@
 const abbreviations = {
     'align-items': 'A',
     'backdrop-filter': 'BF',
-    'background-color': 'BG',
+    'background': 'BG',
+    'background-color': 'BGC',
     'background-image': 'BI',
     'background-attachment': 'BIA',
     'background-repeat': 'BIR',
@@ -39,6 +40,7 @@ const abbreviations = {
     'margin-right': 'MR',
     'margin-top': 'MT',
     'margin-bottom': 'MB',
+    'mask-image': 'MI',
     'max-height': 'MAH',
     'max-width': 'MAW',
     'min-height': 'MIH',

package/dist/types/components.d.ts

@@ -34,6 +34,9 @@ export declare class UIComponent<P extends UIComponentProps> {
     onClick(callback: (event: MouseEvent) => void): this;
     onDoubleClick(callback: (event: MouseEvent) => void): this;
     onMouseDown(callback: (event: MouseEvent) => void): this;
+    onMouseOver(callback: (event: MouseEvent) => void): this;
+    onMouseOut(callback: (event: MouseEvent) => void): this;
+    onMouseLeave(callback: (event: MouseEvent) => void): this;
     onKeyUp(callback: (event: KeyboardEvent) => void): this;
     onKeyDown(callback: (event: KeyboardEvent) => void): this;
     onBlur(callback: (event: FocusEvent) => void): this;

package/dist/types/core.d.ts

@@ -9,6 +9,7 @@ export interface UIComponentProps {
     alignItems?: 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'baseline' | 'inherit';
     animate?: string;
     animateAll?: string;
+    bg?: string;
     bgColor?: string;
     bgImageAttachment?: 'scroll' | 'fixed' | 'unset' | 'inherit';
     bgImageRepeat?: 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y' | 'unset' | 'space' | 'inherit';
@@ -58,6 +59,7 @@ export interface UIComponentProps {
     marginRight?: string;
     marginTop?: string;
     marginVertical?: string;
+    maskImage?: string;
     mouseEnabled?: boolean;
     minHeight?: string;
     minWidth?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "flinker-dom",
   "description": "Free TypeScript library for writing frontend apps",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Dittner/FlinkerDOM.git"