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

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 # CHANGELOG
 
 
+## 7.1.8
+
+* SelectSkin: Fix templating
+
+
+## 7.1.7
+
+* Typescript: Fix some type
+
+
+## 7.1.6
+
+* Minor fix
+
+
 ## 7.1.5
 
 * Typescript: Fix some type
@@ -9,6 +24,7 @@
 ## 7.1.4
 
 * Typescript: Fix tsify and browserify compatibility
+* HistoryController: Remove UrlParser for window.URL
 
 
 ## 7.1.3

package/Events/HistoryController.ts

@@ -1,5 +1,4 @@
 import { on }        from './EventsManager';
-import { UrlParser } from '../Helpers/UrlParser';
 import { slice }     from '../Helpers/Slice';
 
 
@@ -33,7 +32,7 @@ export default class HistoryController {
     #hasPushstate:           boolean;
     #hasPopStateEvent:       boolean;
     #currentState:           FLib.Events.History.StateObject;
-    #registeredFunctionList: (( url: FLib.Helpers.UrlParser, state: any ) => void)[];
+    #registeredFunctionList: (( url: URL, state: any ) => void)[];
 
 
     get state(): FLib.Events.History.StateObject {
@@ -53,7 +52,7 @@ export default class HistoryController {
         this.#defaultTitle = encodeURIComponent( defaultTitle );
 
         this.#currentState = {
-            "url":   new UrlParser( window.location.href ),
+            "url":   new window.URL( window.location.href ),
             "state": {},
             "title": this.#defaultTitle
         };
@@ -69,7 +68,7 @@ export default class HistoryController {
 
 
     // Call each registered function for popstate event
-    #callRegisteredFunction = ( url: FLib.Helpers.UrlParser, state: any ): void => {
+    #callRegisteredFunction = ( url: URL, state: any ): void => {
         if ( !this.#registeredFunctionList.length ) {
             return;
         }
@@ -87,7 +86,7 @@ export default class HistoryController {
         }
 
         this.#currentState = {
-            "url": new UrlParser( document.location.href ),
+            "url": new URL( document.location.href ),
             state,
             "title": ""
         };
@@ -101,15 +100,15 @@ export default class HistoryController {
      *
      * @param state - Native browser state object
      */
-    pushState( state: any, title: string, url: string | UrlParser ): this {
+    pushState( state: any, title: string, url: string | URL ): this {
         if ( !this.#hasPushstate ) {
             return this;
         }
 
-        url = url instanceof UrlParser ? url : new UrlParser( url as string );
+        url = url instanceof URL ? url : new URL( url as string );
 
         this.#currentState = {
-            "url": url as UrlParser,
+            "url": url as URL,
             state,
             "title": title ? encodeURIComponent( title ) : this.#defaultTitle
         };
@@ -118,7 +117,7 @@ export default class HistoryController {
             window.history.pushState(
                 state,
                 this.#currentState.title,
-                this.#currentState.url.absolute2
+                this.#currentState.url.href
             );
         }
         catch ( e ) {
@@ -137,14 +136,14 @@ export default class HistoryController {
             return this;
         }
 
-        anchor = anchor.indexOf( '#' ) === -1 ? anchor : anchor.slice( 1 );
+        anchor = anchor.indexOf( '#' ) === -1 ? `#${ anchor }` : anchor;
 
         try {
-            this.#currentState.url.setAnchor( anchor );
+            this.#currentState.url.hash = anchor.indexOf( '#' ) === -1 ? `#${ anchor }` : anchor;
             window.history.pushState(
                 this.#currentState.state,
                 this.#currentState.title,
-                this.#currentState.url.absolute2
+                this.#currentState.url.href
             );
         }
         catch ( e ) {

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,
+                "layerClassName": this.#options.layerClassName,
+                "listClassName":  this.#options.listClassName
             } ) );
         }
 
         this.#$parent.appendChild( strToDOM( quickTemplate( this.#options.listTpl.wrapper, {
-            "items": HTML_LIST.join( '' )
+            "items":         HTML_LIST.join( '' ),
+            "itemClassName": this.#options.itemClassName
         } ) ) );
 
 

package/README.md

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

package/Types/EventsHelpers.d.ts

@@ -179,12 +179,12 @@ declare namespace FLib {
          */
         namespace History {
             type StateObject = {
-                url:    FLib.Helpers.UrlParser;
+                url:    URL;
                 state:  any;
                 title:  string;
             }
 
-            type Callback = ( url: FLib.Helpers.UrlParser, state: any ) => void;
+            type Callback = ( url: URL, state: any ) => void;
         }
 
 

package/package.json

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