@creative-web-solution/front-library 7.1.6 → 7.1.9

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG
 
+
+## 7.1.9
+
+* SelectSkin: Fix templating
+
+
+## 7.1.7
+
+* Typescript: Fix some type
+
+
 ## 7.1.6
 
 * Minor fix
@@ -15,6 +26,7 @@
 * Typescript: Fix tsify and browserify compatibility
 * HistoryController: Remove UrlParser for window.URL
 
+
 ## 7.1.3
 
 * Typescript: Fix some type

package/Modules/SkinCheckbox.ts

@@ -16,16 +16,16 @@ const defaultOptions: FLib.SkinCheckbox.Options = {
  */
  export default class SkinCheckbox implements FLib.SkinCheckbox.SkinCheckbox {
 
-    #$checkbox!: FLib.SkinCheckbox.CustomCheckbox;
-    #options!:   FLib.SkinCheckbox.Options;
-    #$parent!:   FLib.SkinCheckbox.CustomCheckboxParent;
+    #$checkbox: FLib.SkinCheckbox.CustomCheckbox;
+    #options:   FLib.SkinCheckbox.Options;
+    #$parent:   FLib.SkinCheckbox.CustomCheckboxParent;
 
 
     constructor( $checkbox: HTMLInputElement, userOptions: Partial<FLib.SkinCheckbox.Options> = {} ) {
 
         // Already skinned
         if ( ($checkbox as FLib.SkinCheckbox.CustomCheckbox).__skinAPI ) {
-            return;
+            throw 'SkinSelect: Select already skinned';
         }
 
         this.#$checkbox = $checkbox;

package/Modules/SkinRadio.ts

@@ -27,16 +27,16 @@ const defaultOptions = {
  * ```
  */
 export default class SkinRadioButton implements FLib.SkinRadio.SkinRadio {
-    #$radio!:   FLib.SkinRadio.CustomRadioButton;
-    #options!:  FLib.SkinRadio.Options;
-    #$parent!:  FLib.SkinRadio.CustomRadioButtonParent;
-    #$rdGroup!: NodeListOf<FLib.SkinRadio.CustomRadioButton>;
+    #$radio:   FLib.SkinRadio.CustomRadioButton;
+    #options:  FLib.SkinRadio.Options;
+    #$parent:  FLib.SkinRadio.CustomRadioButtonParent;
+    #$rdGroup: NodeListOf<FLib.SkinRadio.CustomRadioButton>;
 
     constructor( $radio: HTMLInputElement, userOptions?: Partial<FLib.SkinRadio.Options> ) {
 
         // Already skinned
         if ( ($radio as FLib.SkinRadio.CustomRadioButton).__skinAPI ) {
-            return;
+            throw 'SkinSelect: Select already skinned';
         }
 
         this.#$radio = $radio;

package/Modules/SkinSelect.ts

@@ -38,22 +38,26 @@ const defaultOptions: FLib.SkinSelect.Options = {
  * You can access the skin API in the __skinAPI property of the $select HTMLElement or its wrapper.
  */
 export default class SkinSelect implements FLib.SkinSelect.SkinSelect {
-    #$select!:          FLib.SkinSelect.CustomSelect;
+    #$select:           FLib.SkinSelect.CustomSelect;
     #loading            = false;
-    #options!:          FLib.SkinSelect.Options;
-    #extraClass!:       string;
-    #$parent!:          FLib.SkinSelect.CustomSelectParent;
-    #$title!:           HTMLElement;
+    #options:           FLib.SkinSelect.Options;
+    #extraClass:        string;
+    #$parent:           FLib.SkinSelect.CustomSelectParent;
+    #$title:            HTMLElement;
     #isListOpened       = false;
     #$options:          NodeList | undefined;
     #$lastOption:       HTMLElement | null = null;
     #focusedItemIndex   = -1;
     #$layer:            HTMLElement | undefined;
 
+
     constructor( $select: FLib.SkinSelect.CustomSelect, userOptions?: Partial<FLib.SkinSelect.Options> ) {
 
-        if ( $select.hasAttribute( 'multiple' ) || $select.__skinAPI ) {
-            return;
+        if ( $select.hasAttribute( 'multiple' ) ) {
+            throw 'SkinSelect: This feature doesn\'t work on select with multiple selection';
+        }
+        else if ( $select.__skinAPI ) {
+            throw 'SkinSelect: Select already skinned';
         }
 
         this.#$select = $select;
@@ -146,7 +150,7 @@ export default class SkinSelect implements FLib.SkinSelect.SkinSelect {
 
 
     #openList = (): void => {
-        if ( this.#$select.disabled || this.#loading ) {
+        if ( this.#$select?.disabled || this.#loading ) {
             return;
         }
 
@@ -385,14 +389,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
         } ) ) );
 
 

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.6
+@version: 7.1.9
 
 
 ## Use

package/package.json

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