amotify 0.0.59 → 0.0.60

package/src/config.tsx

@@ -1,15 +1,15 @@
-export const script = document.currentScript;
-export const fileName = script?.attributes.getNamedItem( 'src' )!.textContent;
-export const Version = ( fileName?.match( /v\d\.\d\.\d/ ) || [ 'v0.0.0' ] )[ 0 ]!;
+export const script = document.currentScript
+export const fileName = script?.attributes.getNamedItem( 'src' )!.textContent
+export const Version = ( fileName?.match( /v\d\.\d\.\d/ ) || [ 'v0.0.0' ] )[ 0 ]!
 
-export const userAgent = window.navigator.userAgent.toLowerCase();
+export const userAgent = window.navigator.userAgent.toLowerCase()
 export const deviceType: amotify.DeviceTypes =
   userAgent.indexOf( "windows nt" ) !== -1 ? 'windows'
     : userAgent.indexOf( "android" ) !== -1 ? 'android'
       : userAgent.indexOf( "iphone" ) !== -1 ? 'iPhone'
         : userAgent.indexOf( "ipad" ) > -1 || ( userAgent.indexOf( "macintosh" ) > -1 && "ontouchend" in document ) ? 'iPad'
           : userAgent.indexOf( "mac os x" ) !== -1 ? 'macOSX'
-            : 'undefined';
+            : 'undefined'
 export const browserType: amotify.BrowserTypes =
   userAgent.indexOf( "msie" ) !== -1 || userAgent.indexOf( "trident" ) !== -1 ? 'ie'
     : userAgent.indexOf( "edge" ) !== -1 ? 'edge'
@@ -17,7 +17,7 @@ export const browserType: amotify.BrowserTypes =
         : userAgent.indexOf( "safari" ) !== -1 ? 'safari'
           : userAgent.indexOf( "firefox" ) !== -1 ? 'firefox'
             : userAgent.indexOf( "opera" ) !== -1 || userAgent.indexOf( "opr" ) !== -1 ? 'opera'
-              : 'undefined';
+              : 'undefined'
 
 export const deviceIdentifier = () => {
   let info = {
@@ -27,26 +27,29 @@ export const deviceIdentifier = () => {
     isPhone: [ 'Android','iPhone' ].includes( deviceType ),
     isIOS: [ 'iPhone','iPad' ].includes( deviceType ),
     isSystemDarkmode: () => {
-      return window.matchMedia( '(prefers-color-scheme: dark)' ).matches == true;
+      return window.matchMedia( '(prefers-color-scheme: dark)' ).matches == true
+    },
+    isBreakpoint: () => {
+      // if (amotify.config.)
+      return window.innerWidth <= 834
     },
-    isBreakpoint: () => window.innerWidth <= 896,
     isPhonepoint: () => window.innerWidth <= 690
   }
 
-  return info;
+  return info
 }
 
 
 import {
   launchID,
   ColorObjects
-} from './@variables';
+} from './@variables'
 
 export const SetThemeColorTag = () => {
-  let hex = '#45515c';
-  let meta = $( '#ThemeColorMetaTag' );
-  if ( !meta[ 0 ] ) return;
-  meta.setAttribute( 'content',hex );
+  let hex = '#45515c'
+  let meta = $( '#ThemeColorMetaTag' )
+  if ( !meta[ 0 ] ) return
+  meta.setAttribute( 'content',hex )
 }
 
 const DarkmodeColors: {
@@ -59,7 +62,7 @@ const DarkmodeColors: {
   dark: '#333',
   dim: '#666',
   auto: () => {
-    return amotify.config.device.isSystemDarkmode() ? '#333' : '#FFF';
+    return amotify.config.device.isSystemDarkmode() ? '#333' : '#FFF'
   }
 }
 
@@ -69,16 +72,16 @@ const ThemeColors: {
     isBrand: boolean
     isAvocado: boolean
   }
-} = {} as any;
+} = {} as any
 ColorObjects.forEach( ( ColorObject ) => {
-  let { key,isAvocado,isBrand } = ColorObject;
+  let { key,isAvocado,isBrand } = ColorObject
 
   ThemeColors[ key ] = {
     alfa: ( alfa?: number ) => ( `hsla( var( --cH_${ key } ),var( --cS_${ key } ),var( --cL_${ key } ),${ alfa ?? 1 } ) ` ),
     isAvocado,
     isBrand,
   }
-} );
+} )
 
 export const defaultConfig: amotify.config.Methods = {
   version: Version,
@@ -91,72 +94,72 @@ export const defaultConfig: amotify.config.Methods = {
   device: deviceIdentifier(),
   update: {
     tone: ( value ) => {
-      if ( ![ 'default','flat','sharp' ].includes( value ) ) value = 'default';
+      if ( ![ 'default','flat','sharp' ].includes( value ) ) value = 'default'
 
-      if ( value == amotify.config.tone ) return;
+      if ( value == amotify.config.tone ) return
 
-      amotify.config.tone = value;
+      amotify.config.tone = value
 
-      let body = $( 'body' );
+      let body = $( 'body' )
       body
         .removeClass( body.findClass( /^bdsTN/ ) )
         .addClass( 'bdsTN' + value )
         .callback( () => {
-          SetThemeColorTag();
-        } );
+          SetThemeColorTag()
+        } )
 
-      amotify.global.useRecycle.do( 'RootViewController' );
+      amotify.global.useRecycle.do( 'RootViewController' )
     },
     themeColor: ( value ) => {
-      if ( !ColorObjects.find( ( ColorObject ) => ColorObject.key == value ) ) value = 'comun';
-      if ( value == amotify.config.themeColor ) return;
+      if ( !ColorObjects.find( ( ColorObject ) => ColorObject.key == value ) ) value = 'comun'
+      if ( value == amotify.config.themeColor ) return
 
-      amotify.config.themeColor = value;
+      amotify.config.themeColor = value
 
-      let body = $( document.body );
+      let body = $( document.body )
       body
         .removeClass( body.findClass( /^bdsTC/ ) )
         .addClass( 'bdsTC_' + value )
         .callback( () => {
-          SetThemeColorTag();
-        } );
-      amotify.global.useRecycle.do( 'RootViewController' );
+          SetThemeColorTag()
+        } )
+      amotify.global.useRecycle.do( 'RootViewController' )
     },
     darkMode: ( value ) => {
-      if ( ![ 'light','dark','dim','auto' ].includes( value ) ) value = 'light';
-      if ( value == amotify.config.darkMode ) return;
+      if ( ![ 'light','dark','dim','auto' ].includes( value ) ) value = 'light'
+      if ( value == amotify.config.darkMode ) return
       let Value = value == 'auto'
         ? deviceIdentifier().isSystemDarkmode()
           ? 'dark'
           : 'light'
-        : value;
+        : value
 
-      amotify.config.darkMode = value;
+      amotify.config.darkMode = value
 
-      let body = $( 'body' );
+      let body = $( 'body' )
       body
         .removeClass( body.findClass( /^bdsDM/ ) )
-        .addClass( 'bdsDM_' + Value );
+        .addClass( 'bdsDM_' + Value )
 
-      amotify.global.useRecycle.do( 'RootViewController' );
+      amotify.global.useRecycle.do( 'RootViewController' )
     },
     roundness: ( value ) => {
-      if ( !( value >= 0 && value <= 5 ) ) value = 2;
-      if ( value == amotify.config.roundness ) return;
+      if ( !( value >= 0 && value <= 5 ) ) value = 2
+      if ( value == amotify.config.roundness ) return
 
-      amotify.config.roundness = value;
-      amotify.global.useRecycle.do( 'RootViewController' );
+      amotify.config.roundness = value
+      amotify.global.useRecycle.do( 'RootViewController' )
     },
   },
   readExtraCDN: async ( key ) => {
-    let url = key;
-    let valid = false;
+    let url = key
+    let valid = false
     if ( url ) {
-      await $.CDNReader( url );
-      console.log( 'Read extraCdn : ' + key );
-      valid = true;
+      await $.CDNReader( url )
+      console.log( 'Read extraCdn : ' + key )
+      valid = true
     }
-    return valid;
+    return valid
   },
   variables: {
     themeColors: ThemeColors,
@@ -168,21 +171,21 @@ $( 'body' ).addClass( [
   'usrDevice_' + deviceIdentifier().deviceIs,
   'bdsDM_' + defaultConfig.darkMode,
   'bdsTC_' + defaultConfig.themeColor
-] );
+] )
 
 $( window ).addEvent( {
   eventType: 'load',
   callback: () => {
-    let style: any = document.body.style;
+    let style: any = document.body.style
 
-    let Body = $( document.body );
-    let topNavHeight = Number( Body.getStyleProperty( '--topNavHeight' ).removeLetters() || 0 );
-    let footerNavHeight = Number( Body.getStyleProperty( '--footerNavHeight' ).removeLetters() || 0 );
+    let Body = $( document.body )
+    let topNavHeight = Number( Body.getStyleProperty( '--topNavHeight' ).removeLetters() || 0 )
+    let footerNavHeight = Number( Body.getStyleProperty( '--footerNavHeight' ).removeLetters() || 0 )
 
-    let viewHeight = window.innerHeight;
-    let contentHeight = viewHeight - topNavHeight - footerNavHeight;
+    let viewHeight = window.innerHeight
+    let contentHeight = viewHeight - topNavHeight - footerNavHeight
 
-    style.setProperty( '--viewHeight',window.innerHeight + 'px' );
-    style.setProperty( '--contentHeight',contentHeight + 'px' );
+    style.setProperty( '--viewHeight',window.innerHeight + 'px' )
+    style.setProperty( '--contentHeight',contentHeight + 'px' )
   }
-} );
+} )

package/src/functions/Button/_.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React from 'react'
 import {
   StyleConverter,
   pageTransit
-} from '@global';
+} from '@global'
 
-import style from './style.module.scss';
+import style from './style.module.scss'
 
 const Styles = {
   Size: (
@@ -16,7 +16,7 @@ const Styles = {
     let styles: amotifyUniStyleParams = {
       fontSize: 'inherit'
     }
-    size = size || 'R';
+    size = size || 'R'
     if ( [ 'Plain','Link' ].includes( tone ) ) return {}
 
     if ( size == 'XS' ) {
@@ -34,14 +34,14 @@ const Styles = {
         borderRadius: '3.tone.tertiary'
       }
     } else if ( size == 'R' ) {
-      styles.padding = [ '3/4',1 ];
+      styles.padding = [ '3/4',1 ]
       if ( tone == 'Prime' ) {
-        styles.padding = [ '3/4',2 ];
+        styles.padding = [ '3/4',2 ]
       }
     } else if ( size == 'L' ) {
-      styles.padding = [ 1,3 ];
-      styles.fontSize = '3.paragraph';
-      styles.isSemiBoldFont = true;
+      styles.padding = [ 1,3 ]
+      styles.fontSize = '3.paragraph'
+      styles.isSemiBoldFont = true
     }
 
     styles = {
@@ -51,7 +51,7 @@ const Styles = {
       textAlign: 'center',
       ...styles
     }
-    return styles;
+    return styles
   },
   Tone: (
     seed: amotify.fn.Buttons.Seeds,
@@ -66,16 +66,16 @@ const Styles = {
       border: 'unset'
     }
 
-    if ( tone == 'Plain' ) return styles;
+    if ( tone == 'Plain' ) return styles
     if ( tone == 'Link' ) {
-      styles.fontColor = 'theme';
-      styles.textAlign = 'left';
-      styles.backgroundColor = 'trans';
+      styles.fontColor = 'theme'
+      styles.textAlign = 'left'
+      styles.backgroundColor = 'trans'
     } else if ( tone == 'Normal' ) {
       styles = {
         ...styles,
         backgroundColor: 'trans'
-      };
+      }
     } else if ( tone == 'Border' ) {
       styles = {
         ...styles,
@@ -83,7 +83,7 @@ const Styles = {
         border: '2.normal',
         borderStyle: 'solid',
         boxShadow: '0.thin',
-      };
+      }
     } else if ( tone == 'Prime' ) {
       styles = {
         ...styles,
@@ -96,7 +96,7 @@ const Styles = {
           'push',
           'ripple.white'
         ]
-      };
+      }
       if ( color == 'white' ) {
         styles = {
           ...styles,
@@ -106,7 +106,7 @@ const Styles = {
             'push',
             'ripple.cloud'
           ]
-        };
+        }
       }
     } else if ( tone == 'Sub' ) {
       styles = {
@@ -116,7 +116,7 @@ const Styles = {
           'shrink',
           'ripple.cloud'
         ]
-      };
+      }
     } else if ( tone == 'Clear' ) {
       styles = {
         ...styles,
@@ -126,7 +126,7 @@ const Styles = {
           'shrink',
           'ripple.cloud'
         ]
-      };
+      }
     } else if ( tone == 'FillToBorder' ) {
       styles = {
         ...styles,
@@ -136,7 +136,7 @@ const Styles = {
         borderColor: color as any,
         fontColor: color as any,
         backgroundColor: color as any,
-      };
+      }
     } else if ( tone == 'BorderToFill' ) {
       styles = {
         ...styles,
@@ -146,10 +146,10 @@ const Styles = {
         borderWidth: 2,
         borderColor: color as any,
         backgroundColor: color as any
-      };
+      }
     }
     if ( color == 'cloud' ) {
-      styles.fontColor = '3.blur';
+      styles.fontColor = '3.blur'
     }
 
     if ( tone != 'Link' ) {
@@ -159,7 +159,7 @@ const Styles = {
         ...styles
       }
     }
-    return styles;
+    return styles
   }
 }
 
@@ -180,8 +180,8 @@ const SeedWrapper = ( params: SeedWrapperInput ) => {
     componentID: $.uuidGen(),
     'aria-label': $.uuidGen(),
     ...params,
-  } );
-  let seed = Params.seed;
+  } )
+  let seed = Params.seed
   {
     let {
       isLocked = false,
@@ -191,7 +191,7 @@ const SeedWrapper = ( params: SeedWrapperInput ) => {
       tone = 'border',
       color = 'theme',
       className = '',
-    } = Params;
+    } = Params
 
     Params = {
       ...Styles.Size( params.seed,params.tone,params.size,color as amotify.fn.Buttons.Colors ),
@@ -207,7 +207,7 @@ const SeedWrapper = ( params: SeedWrapperInput ) => {
       style[ 'Tone_' + tone ],
       style[ 'Color_' + color ],
       style[ 'Tone_' + tone + '_Color_' + color ],
-    ].join( ' ' );
+    ].join( ' ' )
 
     if ( isActive ) {
       Params = {
@@ -220,7 +220,7 @@ const SeedWrapper = ( params: SeedWrapperInput ) => {
       }
     }
 
-    Params = StyleConverter.ToClassName( Params );
+    Params = StyleConverter.ToClassName( Params )
   }
 
   if ( seed == 'Button' ) {
@@ -230,42 +230,42 @@ const SeedWrapper = ( params: SeedWrapperInput ) => {
       submitOption,
       onClick,
       ...Props
-    } = Params as amotify.fn.Buttons.ButtonInput;
+    } = Params as amotify.fn.Buttons.ButtonInput
 
     if ( submitOption ) {
       submitOption = {
         acceptInvalidForm: false,
         submitDelegationKey: 'auxEnter',
         ...submitOption
-      };
+      }
       Props = {
         ...Props,
         'data-form-submit-button': submitOption.formName,
         'data-sdfike': $.flatArray( submitOption.submitDelegationKey ).join( ',' )
-      } as any;
+      } as any
     }
 
     return <button
       data-component-id={ componentID }
       onClick={ async ( args ) => {
-        if ( onClick ) onClick( args );
+        if ( onClick ) onClick( args )
 
-        if ( !submitOption ) return;
-        let form = await $.formCollect( submitOption.formName );
+        if ( !submitOption ) return
+        let form = await $.formCollect( submitOption.formName )
 
-        if ( !submitOption.acceptInvalidForm && !form.valid ) return;
-        submitOption.callback( form.data,form.valid );
+        if ( !submitOption.acceptInvalidForm && !form.valid ) return
+        submitOption.callback( form.data,form.valid )
       } }
       { ...Props as any }
-    />;
+    />
   } else if ( seed == 'Label' ) {
     let {
       isLocked,isActive,isActiveClassName,isActiveStyles,
       componentID,
       ...Props
-    } = Params as amotify.fn.Buttons.LabelInput;
+    } = Params as amotify.fn.Buttons.LabelInput
 
-    return <label { ...Props } />;
+    return <label { ...Props } />
   } else if ( seed == 'Anchor' ) {
     let {
       isLocked,isActive,isActiveClassName,isActiveStyles,
@@ -275,27 +275,27 @@ const SeedWrapper = ( params: SeedWrapperInput ) => {
       sync,
       shiftQueryParams,
       ...Props
-    } = Params as amotify.fn.Buttons.AnchorInput;
+    } = Params as amotify.fn.Buttons.AnchorInput
 
     return <button
       onClick={ ( event ) => {
-        let aux = event.ctrlKey || event.metaKey;
+        let aux = event.ctrlKey || event.metaKey
 
-        let openNew = newTab || !!aux;
+        let openNew = newTab || !!aux
 
-        let URL = href;
-        if ( shiftQueryParams ) URL += location.search;
+        let URL = href
+        if ( shiftQueryParams ) URL += location.search
 
         if ( sync ) {
-          pageTransit.pushSync( URL );
+          pageTransit.pushSync( URL )
         } else {
-          pageTransit.push( URL,!!openNew );
+          pageTransit.push( URL,!!openNew )
         }
       } }
       { ...Props as any }
-    />;
+    />
   }
-  return null;
+  return null
 }
 
 const SizeBalancer: {