@creative-web-solution/front-library 7.1.8 → 7.1.11

package/CHANGELOG.md

@@ -1,7 +1,21 @@
 # CHANGELOG
 
 
-## 7.1.8
+## 7.1.11
+
+* Validator: Update `date` validator
+
+
+## 7.1.10
+
+* SelectSkin: Change selection feature, add:
+    * select( param: number | string | HTMLElement )
+    * selectByIndex( index: number )
+    * selectByOption( optionOrItem: HTMLElement )
+    * selectByValue( value: string | number )
+
+
+## 7.1.9
 
 * SelectSkin: Fix templating
 

package/Modules/SkinSelect.ts

@@ -1,6 +1,5 @@
 import { fire, on, off }  from '../Events/EventsManager';
 import { extend }         from '../Helpers/Extend';
-import { isNumber }       from '../Helpers/Type';
 import { wrap }           from '../DOM/Wrap';
 import { strToDOM }       from '../DOM/StrToDOM';
 import { index }          from '../DOM/Index';
@@ -279,42 +278,60 @@ export default class SkinSelect implements FLib.SkinSelect.SkinSelect {
     }
 
 
-    /**
-     * Select an option
-     */
-    select( optionOrIndex: HTMLElement | number ): this {
-        let _index, option;
-
+    selectByValue( value: string | number ): this {
         if ( this.#$select.disabled || this.#loading ) {
             return this;
         }
 
-        const isParameterANumber = isNumber( optionOrIndex );
+        const IDX = Array.from( this.#$select.options ).findIndex( option => option.value === String( value ) );
 
-        if ( isParameterANumber ) {
-            _index = optionOrIndex;
+        if ( IDX < 0 ) {
+            return this;
         }
-        else {
-            _index = index( optionOrIndex as HTMLElement );
+
+        return this.selectByIndex( IDX );
+    }
+
+
+    selectByOption( optionOrItem: HTMLElement ): this {
+        if ( this.#$select.disabled || this.#loading ) {
+            return this;
         }
 
-        if ( _index < 0 || _index > this.#$select.options.length ) {
+        const IDX = index( optionOrItem ) ;
+
+        if ( IDX < 0 ) {
             return this;
         }
 
-        this.#$select.options[ _index ].selected = true;
+        return this.selectByIndex( IDX );
+    }
 
-        if ( this.#options.full ) {
-            option = this.#$parent.querySelectorAll( `.${ this.#options.itemClassName }` )[ _index ];
 
-            if ( this.#$lastOption ) {
-                this.#$lastOption.classList.remove( this.#options.activeOptionClass );
-            }
+    /**
+     * Select an option
+     */
+    selectByIndex( index: number ): this {
 
-            if ( option ) {
-                option.classList.add( this.#options.activeOptionClass );
-                this.#$lastOption = option;
-            }
+        if ( this.#$select.disabled || this.#loading ) {
+            return this;
+        }
+
+        if ( index < 0 || index > this.#$select.options.length ) {
+            return this;
+        }
+
+        this.#$select.options[ index ].selected = true;
+
+        if ( this.#options.full ) {
+            ( this.#$parent.querySelectorAll( `.${ this.#options.itemClassName }` ) as NodeListOf<HTMLOptionElement>)
+                        .forEach( ( $opt, optIdx ) => {
+                            $opt.selected = optIdx === index;
+                            $opt.classList.toggle( this.#options.activeOptionClass, $opt.selected );
+                            if ( $opt.selected ) {
+                                this.#$lastOption = $opt;
+                            }
+                        } );
         }
 
         fire( this.#$select, {
@@ -325,6 +342,23 @@ export default class SkinSelect implements FLib.SkinSelect.SkinSelect {
     }
 
 
+    /**
+     * If arg is a number, it is considered as an option index, not a value.
+     */
+    select( arg: number | string | HTMLElement ): this {
+        if ( typeof arg === 'number' ) {
+            return this.selectByIndex( arg );
+        }
+        else if ( typeof arg === 'string' ) {
+            return this.selectByValue( arg );
+        }
+        else if ( typeof arg === 'object' ) {
+            return this.selectByOption( arg );
+        }
+
+        return this;
+    }
+
     #setSelectOptions = ( data: FLib.SkinSelect.OptionArray[] ): void => {
         let hasSelectedOption;
 
@@ -392,14 +426,14 @@ export default class SkinSelect implements FLib.SkinSelect.SkinSelect {
                 "onClass":        opt.selected ? " on" : "",
                 "text":           opt.text,
                 "value":          opt.value,
-                "layerClassName": this.#options.layerClassName,
-                "listClassName":  this.#options.listClassName
+                "itemClassName":  this.#options.itemClassName
             } ) );
         }
 
         this.#$parent.appendChild( strToDOM( quickTemplate( this.#options.listTpl.wrapper, {
-            "items":         HTML_LIST.join( '' ),
-            "itemClassName": this.#options.itemClassName
+            "items":          HTML_LIST.join( '' ),
+            "layerClassName": this.#options.layerClassName,
+            "listClassName":  this.#options.listClassName
         } ) ) );
 
 
@@ -422,7 +456,7 @@ export default class SkinSelect implements FLib.SkinSelect.SkinSelect {
         if ( !(e.target as HTMLElement).matches( '.' + this.#options.itemClassName ) ) {
             return;
         }
-        this.select( e.target as HTMLElement );
+        this.selectByOption( e.target as HTMLElement );
     }
 
 

package/Modules/Validator/Tools/IsDate.ts

@@ -5,7 +5,9 @@
  *
  * @see extra/modules/validator.md for details
  */
-export default function isDate( value: string, format = 'd/m/y' ): boolean {
+ export default function isDate( value: string, format = 'd/m/y' ): boolean {
+    format = format.toLocaleLowerCase();
+
     const RE_SEPARATOR = ( /[^dmy]/ ).exec( format );
 
     if ( !RE_SEPARATOR ) {
@@ -18,22 +20,38 @@ export default function isDate( value: string, format = 'd/m/y' ): boolean {
         return false;
     }
 
-    const SPLITTED_FORMAT = format.split( SEPARATOR );
-    const SPLITTED_VALUE  = value.split( SEPARATOR );
+    const ARR_FORMAT = format.split( SEPARATOR );
+    const ARR_VALUE  = value.split( SEPARATOR );
 
-    if ( SPLITTED_FORMAT.length !== SPLITTED_VALUE.length ) {
+    if ( ARR_FORMAT.length !== ARR_VALUE.length ) {
         return false;
     }
 
-    const y = Number( SPLITTED_VALUE[ SPLITTED_FORMAT.indexOf( 'y' ) ] );
-    const m = Number( SPLITTED_VALUE[ SPLITTED_FORMAT.indexOf( 'm' ) ] ) - 1;
-    const d = Number( SPLITTED_VALUE[ SPLITTED_FORMAT.indexOf( 'd' ) ] );
+    const PARSED_DATE = {
+        "d": -1,
+        "m": -1,
+        "y": -1
+    };
+
+    ARR_FORMAT.forEach( ( format, index ) => {
+        const VALUE = Number( ARR_VALUE[ index ] );
+
+        if ( format.indexOf( 'y' ) > -1 ) {
+            PARSED_DATE.y = VALUE;
+        }
+        else if ( format.indexOf( 'm' ) > -1 ) {
+            PARSED_DATE.m = VALUE - 1;
+        }
+        else if ( format.indexOf( 'd' ) > -1 ) {
+            PARSED_DATE.d = VALUE;
+        }
+    } )
 
-    const date = new Date( y, m, d );
+    const date = new Date( PARSED_DATE.y, PARSED_DATE.m, PARSED_DATE.d );
 
     return (
-        date.getDate()     === d &&
-        date.getMonth()    === m &&
-        date.getFullYear() === y
+        date.getDate()     === PARSED_DATE.d &&
+        date.getMonth()    === PARSED_DATE.m &&
+        date.getFullYear() === PARSED_DATE.y
     );
 }

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.8
+@version: 7.1.11
 
 
 ## Use

package/Types/SkinSelect.d.ts

@@ -1,15 +1,18 @@
 declare declare namespace FLib {
     namespace SkinSelect {
         interface SkinSelect {
-            enable():     this;
-            disable():    this;
-            setInvalid(): this;
-            setValid():   this;
-            setLoading(): this
-            unsetLoading(): this
-            updateTitle(): this
-            select( optionOrIndex: HTMLElement | number ): this
-            updateOptions( optionsArray?: FLib.SkinSelect.OptionArray[] ): this
+            enable():                                      this;
+            disable():                                     this;
+            setInvalid():                                  this;
+            setValid():                                    this;
+            setLoading():                                  this;
+            unsetLoading():                                this;
+            updateTitle():                                 this;
+            select( param: number | string | HTMLElement ): this;
+            selectByIndex( index: number ):                 this;
+            selectByOption( optionOrItem: HTMLElement ):     this;
+            selectByValue( value: string | number ):        this;
+            updateOptions( optionsArray?: FLib.SkinSelect.OptionArray[] ): this;
         }
 
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@creative-web-solution/front-library",
   "title": "Frontend library",
   "description": "Frontend functions and modules",
-  "version": "7.1.8",
+  "version": "7.1.11",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],