amotify 0.0.64 → 0.0.66

package/src/global/styleConverter.tsx

@@ -1,465 +0,0 @@
-type StyleType = 'amotf_' | 'amotf_h' | 'amotf_f' | 'amotf_a' | 'amotf_bk'
-
-const FNs = {
-  toConcreteBorderRadius: ( br?: amotify.UniStyles.Borders.RadiusParams ) => {
-    let roundness = amotify.config.roundness | 0
-
-    if ( br == '1.tone.primary' ) {
-      br = [ 0,2,3,4,5,5 ][ roundness ] as amotify.UniStyles.Borders.RadiusParams
-    } else if ( br == '2.tone.secondary' ) {
-      br = [ 0,1,2,3,4,5 ][ roundness ] as amotify.UniStyles.Borders.RadiusParams
-    } else if ( br == '3.tone.tertiary' ) {
-      br = [ 0,'1/3','2/3',1,2,3 ][ roundness ] as amotify.UniStyles.Borders.RadiusParams
-    }
-    return br
-  },
-  ev: ( v: any ) => $.is.nullish( v ),
-  ClassNames: ( type: StyleType,params: amotifyUniStyleParams ) => {
-    let CLS: string[] = []
-
-    let {
-      gap,
-
-      display: disp,
-      position,
-      overflow,
-      fontColor,fontSize,fontWeight,
-      backgroundColor: bgc,
-      textAlign,
-      boxShadow,
-
-      margin: mrg,
-      marginTop: mrgT,
-      marginRight: mrgR,
-      marginBottom: mrgB,
-      marginLeft: mrgL,
-
-      padding: pd,
-      paddingTop: pdT,
-      paddingRight: pdR,
-      paddingBottom: pdB,
-      paddingLeft: pdL,
-
-      top: T,
-      right: R,
-      bottom: B,
-      left: L,
-
-      border: b,
-      borderTop: bT,
-      borderRight: bR,
-      borderBottom: bB,
-      borderLeft: bL,
-
-      borderWidth: bWidth,
-      // borderTopWidth: bTWidth,
-      // borderRightWidth: bRWidth,
-      // borderBottomWidth: bBWidth,
-      // borderLeftWidth: bLWidth,
-
-      borderColor: bColor,
-      // borderTopColor: bTColor,
-      // borderRightColor: bRColor,
-      // borderBottomColor: bBColor,
-      // borderLeftColor: bLColor,
-
-      borderStyle: bStyle,
-      // borderTopStyle: bTStyle,
-      // borderRightStyle: bRStyle,
-      // borderBottomStyle: bBStyle,
-      // borderLeftStyle: bLStyle,
-
-      borderRadius: br,
-      borderTopLeftRadius: brTL,
-      borderTopRightRadius: brTR,
-      borderBottomLeftRadius: brBL,
-      borderBottomRightRadius: brBR,
-
-
-
-      flexSizing,
-      flexWrap,
-      flexType,
-      flexChilds,
-      flexGrid,
-      horizontalAlign,
-      verticalAlign,
-
-      transition,
-
-      gridCenter,
-      gridCols,
-      maxHeight,minHeight,maxWidth,minWidth,
-      width,height,
-      unitHeight,unitWidth,
-
-      opacity,
-
-      ...others
-    } = params
-
-    {
-      FNs.ev( disp ) || CLS.push( 'dsp' + disp )
-
-      if ( overflow ) {
-        let arr = $.flatArray( overflow )
-        CLS.push( 'ovfl-x-' + arr[ 0 ] )
-        CLS.push( 'ovfl-y-' + ( arr[ 1 ] || arr[ 0 ] ) )
-      }
-
-      FNs.ev( position ) || ( CLS.push( 'ps' + position ) )
-      FNs.ev( textAlign ) || ( CLS.push( 'txalg' + textAlign ) )
-
-      FNs.ev( fontColor ) || ( CLS.push( 'ftcl' + String( fontColor )?.replace( /\..*/,'' ) ) )
-
-      FNs.ev( fontSize ) || ( CLS.push( 'ftsz' + String( fontSize )?.replace( /\..*/,'' ) ) )
-      FNs.ev( fontWeight ) || ( CLS.push( 'ftwt' + fontWeight?.replace( /\..*/,'' ) ) )
-
-      FNs.ev( bgc ) || CLS.push( 'bgc' + String( bgc )?.replace( /\..*/,'' ) )
-
-      FNs.ev( boxShadow ) || ( CLS.push( 'bs' + boxShadow ) )
-
-      let _mrgT,_mrgR,_mrgB,_mrgL
-      if ( $.is.exist( mrg ) ) {
-        if ( $.is.array( mrg ) ) {
-          if ( mrg.length == 2 ) [ _mrgT,_mrgR,_mrgB,_mrgL ] = [ ...mrg,...mrg ]
-          else if ( mrg.length == 4 ) [ _mrgT,_mrgR,_mrgB,_mrgL ] = mrg
-        } else _mrgT = _mrgR = _mrgB = _mrgL = mrg
-        mrgT = mrgT ?? _mrgT
-        mrgR = mrgR ?? _mrgR
-        mrgB = mrgB ?? _mrgB
-        mrgL = mrgL ?? _mrgL
-      }
-      FNs.ev( mrgT ) || ( CLS.push( 'mrgt' + mrgT ) )
-      FNs.ev( mrgR ) || ( CLS.push( 'mrgr' + mrgR ) )
-      FNs.ev( mrgB ) || ( CLS.push( 'mrgb' + mrgB ) )
-      FNs.ev( mrgL ) || ( CLS.push( 'mrgl' + mrgL ) )
-
-      let _pdT,_pdR,_pdB,_pdL
-      if ( $.is.exist( pd ) ) {
-        if ( $.is.array( pd ) ) {
-          if ( pd.length == 2 ) [ _pdT,_pdR,_pdB,_pdL ] = [ ...pd,...pd ]
-          else if ( pd.length == 4 ) [ _pdT,_pdR,_pdB,_pdL ] = pd
-        } else _pdT = _pdR = _pdB = _pdL = pd
-        pdT = pdT ?? _pdT
-        pdR = pdR ?? _pdR
-        pdB = pdB ?? _pdB
-        pdL = pdL ?? _pdL
-      }
-      FNs.ev( pdT ) || ( CLS.push( 'pdt' + pdT ) )
-      FNs.ev( pdR ) || ( CLS.push( 'pdr' + pdR ) )
-      FNs.ev( pdB ) || ( CLS.push( 'pdb' + pdB ) )
-      FNs.ev( pdL ) || ( CLS.push( 'pdl' + pdL ) )
-
-      FNs.ev( T ) || ( CLS.push( 'pstt' + T ) )
-      FNs.ev( R ) || ( CLS.push( 'pstr' + R ) )
-      FNs.ev( B ) || ( CLS.push( 'pstb' + B ) )
-      FNs.ev( L ) || ( CLS.push( 'pstl' + L ) )
-
-      {
-        {
-          if ( $.is.exist( b ) ) {
-            bT = bT ?? b
-            bR = bR ?? b
-            bB = bB ?? b
-            bL = bL ?? b
-          }
-          if ( $.is.boolean( bT ) ) bT = [ 'unset','2.normal' ][ Number( bT ) ] as amotify.UniStyles.Borders.BorderParams
-          if ( $.is.boolean( bR ) ) bR = [ 'unset','2.normal' ][ Number( bR ) ] as amotify.UniStyles.Borders.BorderParams
-          if ( $.is.boolean( bB ) ) bB = [ 'unset','2.normal' ][ Number( bB ) ] as amotify.UniStyles.Borders.BorderParams
-          if ( $.is.boolean( bL ) ) bL = [ 'unset','2.normal' ][ Number( bL ) ] as amotify.UniStyles.Borders.BorderParams
-          FNs.ev( bT ) || ( CLS.push( 'b_t_ss' + String( bT )?.replace( /\..*/,'' ) ) )
-          FNs.ev( bR ) || ( CLS.push( 'b_r_ss' + String( bR )?.replace( /\..*/,'' ) ) )
-          FNs.ev( bB ) || ( CLS.push( 'b_b_ss' + String( bB )?.replace( /\..*/,'' ) ) )
-          FNs.ev( bL ) || ( CLS.push( 'b_l_ss' + String( bL )?.replace( /\..*/,'' ) ) )
-        }
-        if ( $.is.exist( bWidth ) ) CLS.push( 'b_wth' + String( bWidth ) )
-        if ( $.is.exist( bColor ) ) CLS.push( 'b_cl' + String( bColor ) )
-        if ( $.is.exist( bStyle ) ) CLS.push( 'b_st' + String( bStyle ) )
-
-        {
-          let _brTL,_brTR,_brBL,_brBR
-          if ( $.is.exist( br ) ) {
-            if ( $.is.array( br ) ) {
-              if ( br.length == 4 ) [ _brTL,_brTR,_brBR,_brBL ] = br
-            } else {
-              _brTL = _brTR = _brBL = _brBR = br
-            }
-            brTL = brTL ?? _brTL
-            brTR = brTR ?? _brTR
-            brBL = brBL ?? _brBL
-            brBR = brBR ?? _brBR
-          }
-        }
-        FNs.ev( brTL ) || ( CLS.push( 'br_tl' + FNs.toConcreteBorderRadius( brTL ) ) )
-        FNs.ev( brTR ) || ( CLS.push( 'br_tr' + FNs.toConcreteBorderRadius( brTR ) ) )
-        FNs.ev( brBL ) || ( CLS.push( 'br_bl' + FNs.toConcreteBorderRadius( brBL ) ) )
-        FNs.ev( brBR ) || ( CLS.push( 'br_br' + FNs.toConcreteBorderRadius( brBR ) ) )
-      }
-
-      FNs.ev( opacity ) || ( CLS.push( 'op' + opacity ) )
-
-      if ( $.is.exist( gap ) ) {
-        let gapRow,gapCol
-        if ( $.is.array( gap ) ) gapRow = gap[ 0 ],gapCol = gap[ 1 ]
-        else gapRow = gapCol = gap
-        CLS.push( ...[ 'gapRow' + gapRow,'gapCol' + gapCol ] )
-      }
-
-      FNs.ev( flexSizing ) || ( CLS.push( 'flsz' + flexSizing ) )
-      FNs.ev( flexWrap ) || ( CLS.push( 'flwrp' + flexWrap ) )
-      FNs.ev( flexType ) || ( CLS.push( 'fltyp' + flexType ) )
-      FNs.ev( flexChilds ) || ( CLS.push( 'flchld' + flexChilds ) )
-      FNs.ev( flexGrid ) || ( CLS.push( 'flgrid' + flexGrid ) )
-      FNs.ev( verticalAlign ) || ( CLS.push( 'flvrt' + verticalAlign ) )
-      FNs.ev( horizontalAlign ) || ( CLS.push( 'flhrz' + horizontalAlign ) )
-
-      FNs.ev( gridCenter ) || ( CLS.push( 'grcnt' + gridCenter ) )
-      FNs.ev( gridCols ) || ( CLS.push( 'grcol' + gridCols ) )
-
-      FNs.ev( height ) || ( CLS.push( 'hgt' + height ) )
-      FNs.ev( width ) || ( CLS.push( 'wdt' + width ) )
-
-      FNs.ev( unitHeight ) || ( CLS.push( 'unthgt' + unitHeight ) )
-      FNs.ev( unitWidth ) || ( CLS.push( 'untwdt' + unitWidth ) )
-
-      FNs.ev( transition ) || ( CLS.push( 'trnst' + transition ) )
-
-      FNs.ev( maxHeight ) || ( CLS.push( 'maxh' + maxHeight ) )
-      FNs.ev( minHeight ) || ( CLS.push( 'minh' + minHeight ) )
-      FNs.ev( maxWidth ) || ( CLS.push( 'maxw' + maxWidth ) )
-      FNs.ev( minWidth ) || ( CLS.push( 'minw' + minWidth ) )
-    }
-
-    return {
-      otherParams: others,
-      className: CLS.length ? type + CLS.join( ' ' + type ) : ''
-    }
-  }
-}
-
-export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawParams ) => {
-  let params: amotifyBasicElement = { ...rawParams } as any
-  let {
-    gradients,
-    ssCardBox,
-    ssSphere,
-    ssSquare,
-    ssPushable,
-    ssAbsoluteCovered,
-    ssTextEllipsis,
-    flexCenter,
-    flexNewLine,
-
-    isLightFont,
-    isBoldFont,
-    isSemiBoldFont,
-    isRounded,
-    ...ReturnParams
-  } = params
-
-  if ( gradients ) {
-    let {
-      deg,
-      colors
-    } = gradients
-
-    ReturnParams = {
-      ...ReturnParams,
-      freeCSS: {
-        ...ReturnParams.freeCSS,
-        background: `linear-gradient(${ deg }deg,${ colors.join( ',' ) })`,
-      }
-    }
-  }
-  if ( ssCardBox ) {
-    if ( ssCardBox === true ) {
-      ssCardBox = 'border'
-      if ( amotify.config.tone == 'flat' ) ssCardBox = 'cloud'
-    }
-
-    let exStyles: amotifyUniStyleParams = {
-      backgroundColor: '1.layer.base',
-      borderRadius: '1.tone.primary',
-      boxShadow: '0.thin',
-      freeCSS: {
-        zIndex: 1
-      }
-    }
-
-    if ( ssCardBox == 'border' ) {
-      exStyles.border = true
-    } else if ( ssCardBox == 'layer' ) {
-      exStyles.backgroundColor = '1.layer.base'
-    } else if ( ssCardBox == 'cloud' ) {
-      exStyles.backgroundColor = 'cloud'
-    } else if ( ssCardBox == 'shadow' ) {
-      exStyles.boxShadow = '0.normal'
-    }
-
-    if ( [ 'dim','dark' ].includes( amotify.config.darkMode ) ) exStyles.boxShadow = '1.remark'
-    ReturnParams = {
-      ...exStyles,
-      ...ReturnParams,
-      freeCSS: {
-        ...exStyles.freeCSS,
-        ...ReturnParams.freeCSS
-      },
-      hoverStyles: {
-        ...exStyles.hoverStyles,
-        ...ReturnParams.hoverStyles
-      },
-      activeStyles: {
-        ...exStyles.activeStyles,
-        ...ReturnParams.activeStyles
-      },
-      focusStyles: {
-        ...exStyles.focusStyles,
-        ...ReturnParams.focusStyles
-      },
-      UnderBreakPointStyles: {
-        ...exStyles.UnderBreakPointStyles,
-        ...ReturnParams.UnderBreakPointStyles
-      }
-    }
-  }
-  if ( ssSphere ) {
-    flexCenter = flexCenter ?? true
-    ReturnParams = {
-      padding: 0,
-      unitWidth: ssSphere,
-      unitHeight: ssSphere,
-      borderRadius: 'sphere',
-      flexSizing: 'none',
-      ...ReturnParams,
-    }
-  }
-  if ( ssSquare ) {
-    flexCenter = flexCenter ?? true
-    ReturnParams = {
-      padding: 0,
-      unitWidth: ssSquare,
-      unitHeight: ssSquare,
-      flexSizing: 'none',
-      ...ReturnParams,
-    }
-  }
-
-  !ssPushable || ( ReturnParams = {
-    transition: 'middle',
-    ...ReturnParams,
-    className: [
-      ReturnParams.className,
-      'ssPushable'
-    ].join( ' ' )
-  } )
-
-  !ssAbsoluteCovered || ( ReturnParams = {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    ...ReturnParams
-  } )
-  !ssTextEllipsis || ( ReturnParams = {
-    overflow: 'hidden',
-    ...ReturnParams,
-    freeCSS: {
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      ...ReturnParams.freeCSS
-    }
-  } )
-  !flexNewLine || ( ReturnParams = {
-    width: 1,
-    flexSizing: 'none',
-    ...ReturnParams
-  } )
-  !flexCenter || ( ReturnParams = {
-    display: 'flex',
-    horizontalAlign: 'center',
-    verticalAlign: 'center',
-    ...ReturnParams
-  } )
-  !isLightFont || ( ReturnParams = {
-    ...ReturnParams,
-    fontWeight: '1.light',
-  } )
-  !isSemiBoldFont || ( ReturnParams = {
-    ...ReturnParams,
-    fontWeight: '3.semiBold',
-  } )
-  !isBoldFont || ( ReturnParams = {
-    ...ReturnParams,
-    fontWeight: '4.bold',
-  } )
-  !isRounded || ( ReturnParams = {
-    ...ReturnParams,
-    borderRadius: 'sphere'
-  } )
-
-  return ReturnParams as any
-}
-export const ToClassName: amotify.global.StyleConverter.ToClassName = ( rawParams ) => {
-  let params = ReadStyleSet( rawParams ) as amotifyBasicElement
-
-  let {
-    componentID,
-    UnderBreakPointStyles = {},
-    hoverStyles = {},
-    focusStyles = {},
-    activeStyles = {},
-
-    className = '',
-
-    freeCSS = {},
-
-    ssEffectsOnActive,
-    ssLastChildLossBorder,
-    ...others
-  } = params
-
-  let ClassNames = [ className ]
-
-  if ( ssLastChildLossBorder ) {
-    ClassNames.push( 'ssLastChildLossBorder_' + ssLastChildLossBorder )
-  }
-
-  if ( ssEffectsOnActive ) {
-    ssEffectsOnActive = $.flatArray( ssEffectsOnActive )
-    for ( let effect of ssEffectsOnActive as any[] ) ClassNames.push( ...[ 'eff_' + effect,'eff_' + effect.split( '.' )[ 0 ] ] )
-  }
-
-  {
-    let result = FNs.ClassNames( 'amotf_',others )
-
-    ClassNames.push( result.className )
-    others = result.otherParams
-  }
-  if ( UnderBreakPointStyles ) ClassNames.push( FNs.ClassNames( 'amotf_bk',UnderBreakPointStyles ).className )
-  if ( hoverStyles ) ClassNames.push( FNs.ClassNames( 'amotf_h',hoverStyles ).className )
-  if ( focusStyles ) ClassNames.push( FNs.ClassNames( 'amotf_f',focusStyles ).className )
-  if ( activeStyles ) ClassNames.push( FNs.ClassNames( 'amotf_a',activeStyles ).className )
-
-  let states = { ...others } as any
-  if ( freeCSS ) states.style = {
-    ...freeCSS,
-    ...states.style
-  }
-
-  if ( componentID || states[ 'data-component-id' ] ) {
-    states[ 'data-component-id' ] = states[ 'data-component-id' ] || componentID
-  }
-
-  if ( ClassNames.length ) {
-    states.className = ClassNames.join( ' ' )
-      .trim()
-      .replace( /%/ig,'P' )
-      .replace( /\d+px/ig,'PIX' )
-      .replace( /\s+/ig,' ' )
-      .replace( /\//ig,'_' )
-      .replace( /\./ig,'-' )
-  }
-  return states
-}

package/src/launch.tsx

@@ -1,119 +0,0 @@
-import 'jsmin-front/@types'
-import '../@types/_'
-
-if ( !global.$ ) console.log( `%c※can not find global.$,please read Jsmin to launch amotify.`,'color:orange' )
-
-import { launchID } from './@variables'
-
-let publicURI = 'https://public.comun.jp/'
-export { publicURI }
-import './preload'
-
-import {
-  deviceIdentifier,
-  defaultConfig,
-  SetThemeColorTag
-} from './config'
-
-import './@jsminAmotifyExtension/_'
-import {
-  React,
-  ReactDOM,
-  ReactRouterDOM,
-  pageTransit,
-  useStore,
-  useRecycle,
-  StyleConverter,
-  LaunchReactApplication,
-  LaunchSubApplication
-} from './@global'
-import {
-  Flex,
-  FlexBr,
-  FAI,
-  Placeholder,
-  Grid,
-  Logo,
-  Box,
-  Span,
-  Paragraph,
-  Img
-} from '@atoms'
-import {
-  List,
-  Accordion,
-  LinkifyText,
-  Text,
-  Column,
-  Row
-} from '@mols'
-import {
-} from '@orgs'
-import {
-  PlayGround
-} from './@templates'
-import {
-  Buttons,
-  Input,
-  Inputs,
-  Table,
-  Layout,
-  Sheet,
-  SnackBar,
-  Loader,
-  Tooltips,
-  Effects,
-  Cropper,
-} from '@fn'
-
-const amotify: amotify = {
-  config: defaultConfig,
-  global: {
-    React,
-    ReactDOM,
-    ReactRouterDOM,
-    pageTransit,
-    useStore,
-    useRecycle,
-    StyleConverter,
-    LaunchReactApplication,
-    LaunchSubApplication
-  },
-  atoms: { Flex,FlexBr,FAI,Placeholder,Grid,Logo,Box,Span,Paragraph,Img },
-  mols: { List,Accordion,LinkifyText,Text,Column,Row },
-  orgs: {},
-  temps: { PlayGround },
-  fn: { Buttons,Input,Table,Layout,Sheet,SnackBar,Loader,Tooltips,Effects,Cropper }
-}
-
-export { amotify,launchID }
-
-if ( window.amotify ) {
-  global[ ( 'amotify_' + launchID ) as 'amotify' ] = amotify
-} else {
-  global.amotify = amotify
-}
-
-import './@styles/@app.scss'
-
-// document.oncontextmenu = () => {return false}
-$( window ).addEvent( {
-  eventType: 'resize',
-  eventID: 'getDeviceInfo',
-  callback: () => {
-    global.amotify.config.device = deviceIdentifier()
-
-    let Body = $( document.body )
-    let viewHeight = window.innerHeight
-
-    let topNavHeight = Number( Body.getStyleProperty( '--topNavHeight' ).removeLetters() )
-    let footerNavHeight = Number( Body.getStyleProperty( '--footerNavHeight' ).removeLetters() )
-    let contentHeight = viewHeight - topNavHeight - footerNavHeight
-
-    Body.setStyleProperty( '--viewHeight',viewHeight + 'px' )
-      .setStyleProperty( '--sideNavHeight',contentHeight + 'px' )
-      .setStyleProperty( '--contentHeight',contentHeight + 'px' )
-  }
-} )
-
-SetThemeColorTag()