@creative-web-solution/front-library 7.1.7 → 7.1.10

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # CHANGELOG
 
 
+## 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
+
+
 ## 7.1.7
 
 * Typescript: Fix some type

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;
 
@@ -389,14 +423,17 @@ export default class SkinSelect implements FLib.SkinSelect.SkinSelect {
 
         for ( const opt of Array.from( this.#$select.options ) ) {
             HTML_LIST.push( quickTemplate( this.#options.listTpl.item, {
-                "onClass": opt.selected ? " on" : "",
-                "text":    opt.text,
-                "value":   opt.value
+                "onClass":        opt.selected ? " on" : "",
+                "text":           opt.text,
+                "value":          opt.value,
+                "itemClassName":  this.#options.itemClassName
             } ) );
         }
 
         this.#$parent.appendChild( strToDOM( quickTemplate( this.#options.listTpl.wrapper, {
-            "items": HTML_LIST.join( '' )
+            "items":          HTML_LIST.join( '' ),
+            "layerClassName": this.#options.layerClassName,
+            "listClassName":  this.#options.listClassName
         } ) ) );
 
 
@@ -419,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/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.7
+@version: 7.1.10
 
 
 ## 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.7",
+  "version": "7.1.10",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],