amotify 0.0.11 → 0.0.13

package/src/functions/Input/_.tsx

@@ -27,7 +27,7 @@ import {
   TextValidate
 } from './Text';
 import { TextAreaInput } from './TextArea';
-import { DigitCharactersInput } from './DigitCharacters'
+import { DigitCharactersInput } from './DigitCharacters';
 import {
   TimeInput,
   TimeFNs
@@ -47,8 +47,9 @@ const UniComponent: React.FC<{
 }> = ( props ) => {
   let [ val_componentID ] = React.useState( props.componentID || $.uuidGen() );
 
+  props = { ...props }
   props.params = {
-    enableFormSubmit: true,
+    enable_form_submit: true,
     // override: 'beforeModified',
     override: 'never',
     name: $.uuidGen(),
@@ -69,6 +70,7 @@ const UniComponent: React.FC<{
 const TextInputs: amotify.fn.Input.Text.Methods = {
   Validate: TextValidate,
   Normal: ( rawParams ) => {
+    rawParams = { ...rawParams }
     if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3;
     if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3;
 
@@ -176,6 +178,7 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
   Origin: ( props: amotify.fn.Input.Time.OriginParams ) => JSX.Element
 } = {
   Origin: ( rawParams ) => {
+    rawParams = { ...rawParams }
     let [ val_componentID ] = React.useState( rawParams.componentID || $.uuidGen() );
     rawParams.componentID = val_componentID;
 
@@ -219,6 +222,7 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
   Month: ( props ) => ( <TimeInputs.Origin restrict='month' { ...props } /> ),
   Year: ( props ) => ( <TimeInputs.Origin restrict='year' { ...props } /> ),
   DateWareki: ( params ) => {
+    params = { ...params }
     let [ val_componentID ] = React.useState( params.componentID || $.uuidGen() );
     params.componentID = val_componentID;
     let {
@@ -289,6 +293,7 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
 }
 
 const ChipsInputs = ( rawParams: amotify.fn.Input.Chips.PlainParams ) => {
+  rawParams = { ...rawParams }
   rawParams = {
     gap: 1,
     display: 'flex',
@@ -308,6 +313,7 @@ const ChipsInputs = ( rawParams: amotify.fn.Input.Chips.PlainParams ) => {
 ChipsInputs.fn = ChipsInput.fn;
 
 const FileInputs = ( rawParams: amotify.fn.Input.Filer.PlainParams ) => {
+  rawParams = { ...rawParams }
   rawParams.override = 'force';
   let params = StyleConverter.ToClassName( rawParams );
   params.cellClassName = [
@@ -330,7 +336,7 @@ export const ListInputs: amotify.fn.Input.List.Methods & {
   Origin: ( props: amotify.fn.Input.List.OriginParams ) => JSX.Element
 } = {
   Origin: ( rawParams ) => {
-
+    rawParams = { ...rawParams }
     let params = DefaultStyles.ListCell( rawParams );
     return ( <UniComponent
       componentID={ rawParams.componentID }
@@ -362,6 +368,7 @@ export const Input: amotify.fn.Input.Methods = {
   },
   Text: TextInputs,
   TextArea: ( rawParams ) => {
+    rawParams = { ...rawParams }
     if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3;
     if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3;
 
@@ -374,29 +381,30 @@ export const Input: amotify.fn.Input.Methods = {
     /> );
   },
   DigitCharacters: ( rawParams ) => {
+    rawParams = { ...rawParams }
     rawParams = {
       textAlign: 'center',
       width: 0,
       ...rawParams
     }
     if ( rawParams.combineInput ) {
-      rawParams = $.deepMerge(
-        rawParams,{
+      rawParams = {
         digits: rawParams.digits,
         textAlign: 'center',
         width: 0,
         borderRadius: 0,
         freeCSS: {
           minWidth: 12 * 2,
-          marginRight: -1
+          marginRight: -1,
+          ...rawParams.freeCSS
         },
         listStyles: {
           borderRadius: '2.tone.secondary',
           border: 'unset',
-          gap: 0
+          gap: 0,
+          ...rawParams.listStyles
         },
       }
-      );
     }
     let params = DefaultStyles.Boxish( rawParams ) as amotify.fn.Input.DigitCharacters.PlainParams;
 
@@ -410,6 +418,7 @@ export const Input: amotify.fn.Input.Methods = {
   },
   Time: TimeInputs,
   Select: ( rawParams ) => {
+    rawParams = { ...rawParams }
     if ( $.is.nullish( rawParams.rightIcon ) ) {
       rawParams.rightIcon = <Input.Comps.RightIcon
         flexType='col'
@@ -467,6 +476,7 @@ export const Input: amotify.fn.Input.Methods = {
   },
   File: FileInputs,
   Switch: ( rawParams ) => {
+    rawParams = { ...rawParams }
     rawParams.color = rawParams.color || 'theme';
     return ( <UniComponent
       componentID={ rawParams.componentID }
@@ -475,6 +485,7 @@ export const Input: amotify.fn.Input.Methods = {
     /> );
   },
   Slider: ( rawParams ) => {
+    rawParams = { ...rawParams }
     return ( <UniComponent
       componentID={ rawParams.componentID }
       children={ SliderInput }
@@ -482,6 +493,7 @@ export const Input: amotify.fn.Input.Methods = {
     /> );
   },
   Checker: ( rawParams ) => {
+    rawParams = { ...rawParams }
     return ( <ListInputs.Origin
       { ...rawParams }
       tone='plain'
@@ -633,6 +645,7 @@ const DefaultStyles = {
     return Styles;
   },
   ListCell: ( params: amotify.fn.Input.List.OriginParams ) => {
+    params = { ...params }
     if ( !params.tone ) {
       params.tone = 'border';
 
@@ -717,6 +730,7 @@ const DefaultStyles = {
     return StyleConverter.ToClassName( params );
   },
   Boxish: ( params: any ) => {
+    params = { ...params }
     if ( !params.tone ) {
       params.tone = 'border';
       if ( amotify.config.tone == 'sharp' ) params.tone = 'bottomBorder';

package/src/functions/Input/core.tsx

@@ -225,6 +225,7 @@ export const CommonEffects: {
     onUpdateValue,
     onUpdateValidValue
   } = props;
+  params = { ...params }
   let {
     componentID
   } = val_status;
@@ -326,7 +327,8 @@ export const CommonEffects: {
     }
 
     if ( eventType == 'refresh' ) {
-      useStore.get( componentID ).ResolveRefresh( null );
+      let comp = useStore.get( componentID );
+      if ( comp && comp.ResolveRefresh ) comp.ResolveRefresh( null );
     }
 
     if ( eventType == 'update' ) {

package/src/functions/Layout/PageRouter.tsx

@@ -17,10 +17,10 @@ import {
 const userEffect = ( beforeCallback?: Function,afterCallback?: Function,afterFirstCallback?: Function ) => {
   const mounted = React.useRef( false );
   let location = useLocation();
-  let history = useNavigate();
+  let navigate = useNavigate();
   useStore.set( {
-    key: 'history',
-    value: history
+    key: 'navigate',
+    value: navigate
   } );
 
   amotify.fn.Sheet.closeAll( true );
@@ -63,6 +63,7 @@ const Switcher: React.FC<amotify.fn.Layout.PageRouter.RoutesSwitchProps> = ( pro
     let { path,content } = page;
     path = '/' + path.replace( /^\//,'' );
 
+
     return <Route
       key={ path }
       path={ path }
@@ -87,12 +88,10 @@ export const PageRouter: React.FC<amotify.fn.Layout.PageRouter.RouterProps> = (
     afterFirstCallBack
   } = props;
 
-  return (
-    <Switcher
-      routes={ pages }
-      beforeCallBack={ beforeCallBack }
-      afterCallBack={ afterCallBack }
-      afterFirstCallBack={ afterFirstCallBack }
-    />
-  );
+  return <Switcher
+    routes={ pages }
+    beforeCallBack={ beforeCallBack }
+    afterCallBack={ afterCallBack }
+    afterFirstCallBack={ afterFirstCallBack }
+  />;
 }

package/src/functions/Layout/RootViewController/parts.tsx

@@ -210,7 +210,7 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
 
       let groups = $.flatArray( uriGroup );
 
-      let currentURL = location.pathname + location.search;
+      let currentURL = location.pathname;
 
       {
         let isCurrentURL = false;
@@ -219,7 +219,6 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
             location.origin,
             uri.replace( /\//,'' )
           ].join( '/' );
-
           isCurrentURL = currentURL == new URL( url ).pathname;
         }
 

package/src/functions/Loader/corner.tsx

@@ -36,15 +36,17 @@ export const Corner = () => {
     gap={ '1/2' }
     padding={ [ '1/2','3/4' ] }
     borderRadius={ '2/3' }
-    backgroundColor='theme'
+    backgroundColor='dark'
     position='fixed'
     boxShadow={ 2 }
-    right={ 1 }
-    bottom={ 1 }
+    left={ '50%' }
+    top={ 1 }
     opacity='trans'
     transition='short'
+    isRounded
     freeCSS={ {
-      pointerEvents: 'none'
+      pointerEvents: 'none',
+      transform: 'translateX(-50%)'
     } }
   >
     <Flex

package/src/functions/Loader/parts.tsx

@@ -31,7 +31,6 @@ const SizeWrapper: {
     MAX: ( params ) => <Mini size='MAX' color={ color } { ...params } />,
   }
 }
-
 const Loader: amotify.fn.Loader.Methods = {
   __memoryID: memoryID,
   Theme: SizeWrapper( { color: 'theme' } ),

package/src/functions/Loader/style.module.scss

@@ -143,7 +143,7 @@
     }
   }
   &.Active_true {
-    opacity: 1;
+    opacity: .7;
     .Wrap {
       > div {
         animation: 1.2s ldAnm ease infinite;

package/src/functions/Sheet/parts.tsx

@@ -30,7 +30,7 @@ const Comps = {
   contents: {} as {
     [ key: string ]: {
       open: boolean
-      holdState: boolean
+      hold_state: boolean
       params: Params
       created_at: Time.Method
     }
@@ -40,13 +40,13 @@ const Comps = {
       sheetID: $.uuidGen(),
       sheetGroups: params.sheetGroups || [],
       overwrap: params.type == 'custom' ? true : false,
-      holdState: false,
+      hold_state: false,
       ...params,
-      closeOption: {
+      close_option: {
         pageTransit: true,
         escapeKeyDown: true,
         aroundClick: false,
-        ...params.closeOption
+        ...params.close_option
       },
     }
 
@@ -61,7 +61,7 @@ const Comps = {
 
     this.contents[ params.sheetID! ] = {
       open: true,
-      holdState: !!params.holdState,
+      hold_state: !!params.hold_state,
       params: params,
       created_at: $.Time()
     }
@@ -147,12 +147,12 @@ const Comps = {
     } );
     React.useEffect( () => {
       let {
-        closeOption
+        close_option
       } = params;
 
       $.fnScope( () => {
-        if ( !closeOption?.elementBlur ) return;
-        let element = $( closeOption.elementBlur );
+        if ( !close_option?.elementBlur ) return;
+        let element = $( close_option.elementBlur );
         if ( !element[ 0 ] ) return;
         $( element ).addEvent( {
           eventID: 'SheetClosation-' + sheetID!,
@@ -226,7 +226,7 @@ const Comps = {
             .addClass( style.Hide )
             .callback( () => {
               !closeAfter || closeAfter();
-              params.holdState || $.fnScope( () => {
+              params.hold_state || $.fnScope( () => {
                 delete Comps.contents[ sheetID! ];
                 $( '#Sheet-' + sheetID ).remove();
                 $().removeEvent( 'SheetClosation-' + sheetID! );
@@ -262,7 +262,7 @@ const Comps = {
       >
         { isNewSheet ? <Comps.TapSensor
           sheetID={ sheetID! }
-          delegateAroundClick={ params.closeOption?.aroundClick }
+          delegateAroundClick={ params.close_option?.aroundClick }
         /> : null }
         <ContentFC
           componentID={ val_componentID }
@@ -275,11 +275,15 @@ const Comps = {
     Normal: ( params: amotify.fn.Sheet.NormalParams ) => {
       let {
         sheetID,
+        sheetGroups,
         content: Content,
         className = '',
         type,
         size = 'R',
         freeCSS,
+        openAfter,
+        hold_state,
+        overwrap,
         ...styles
       } = params;
       let [ Tcate,Tpos ] = type.split( '.' );
@@ -346,11 +350,15 @@ const Comps = {
     Edge: ( params: amotify.fn.Sheet.NormalParams ) => {
       let {
         sheetID,
+        sheetGroups,
         type,
         content: Content,
         className = '',
         size = 'R',
         freeCSS,
+        close_option,
+        hold_state,
+        overwrap,
         ...styles
       } = params;
 
@@ -390,13 +398,16 @@ const Comps = {
       let {
         componentID,
         sheetID,
+        sheetGroups,
         content: Content,
         size = 'R',
         sizeChanged,
         baseStyles,
-        closeOption: {
+        close_option: {
           swipeDown = true,
         } = {},
+        hold_state,
+        overwrap,
         ...styles
       } = params;
       let screen = $.getScreenSize();
@@ -622,9 +633,13 @@ const Comps = {
     Custom: ( params: amotify.fn.Sheet.CustomParams ) => {
       let {
         sheetID,
+        sheetGroups,
         parent,
         gravityPoint: GPT = 22,
         content: Content,
+        close_option,
+        hold_state,
+        overwrap,
         ...others
       } = params;
 
@@ -793,7 +808,7 @@ $( document )
       if ( event.target?.closest( '.' + style.CustomSheet ) ) return;
 
       customSheets.forEach( ( customSheets ) => {
-        if ( !!customSheets.params.closeOption?.aroundClick ) {
+        if ( !!customSheets.params.close_option?.aroundClick ) {
           Sheet.close( customSheets.params.sheetID! );
         }
       } );
@@ -817,8 +832,8 @@ const Sheet: amotify.fn.Sheet.Methods = {
         backgroundColor: 'trans',
         boxShadow: 'none',
         ...others,
-        closeOption: {
-          ...params.closeOption,
+        close_option: {
+          ...params.close_option,
         },
         freeCSS: {
           maxWidth: '96vw',
@@ -928,7 +943,7 @@ const Sheet: amotify.fn.Sheet.Methods = {
     Content = Comps.contents[ sheetID ];
 
     if ( !Content ) return;
-    if ( et == 'escape' && !Content.params.closeOption?.escapeKeyDown ) return;
+    if ( et == 'escape' && !Content.params.close_option?.escapeKeyDown ) return;
 
     {
       let { params } = Content;
@@ -948,7 +963,7 @@ const Sheet: amotify.fn.Sheet.Methods = {
   closeAll: ( pageTransit ) => {
     for ( let [ key,value ] of Object.entries( Comps.contents ) ) {
       if ( pageTransit ) {
-        if ( value.params.closeOption?.pageTransit == false ) continue;
+        if ( value.params.close_option?.pageTransit == false ) continue;
       }
       Sheet.close( key,'pageTransit' );
     }

package/src/functions/Table/Data/parts.tsx

@@ -661,6 +661,7 @@ const Components = {
   Propagations: {} as any,
 
   DataLeveler: ( params: amotify.fn.Tables.Data.Params ) => {
+    params = { ...params };
     params.filter = params.filter ?? false;
     params.filter = Array.from( { length: params.colLength } ).map( ( a,index ) => {
       if ( $.is.boolean( params.filter ) ) {

package/src/functions/Table/Drag/parts.tsx

@@ -299,8 +299,8 @@ const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
   </> );
 }
 
-
 export const DragTable: React.FC<amotify.fn.Tables.Drag.Params> = ( params ) => {
+  params = { ...params };
   params.colLength = params.colLength + 1;
 
   if ( params.head ) {

package/src/functions/Table/Normal/parts.tsx

@@ -111,6 +111,7 @@ const BodyRows: React.FC<amotify.fn.Tables.Normal.Params> = ( params ) => {
 }
 
 export const NormalTable: React.FC<amotify.fn.Tables.Normal.Params> = ( params ) => {
+  params = { ...params }
   params.rows = params.rows.map( ( row,rowIndex ) => {
     row.rowID = row.rowID || rowIndex;
     return row;

package/src/functions/Table/_.tsx

@@ -51,6 +51,7 @@ const Wrapper: React.FC<amotify.fn.Tables.Uni.Params & {
     tone,
     type,
   } = params;
+  params = { ...params }
   params.tableID = params.tableID || $.uuidGen();
   tone = tone || 'auto';
 

package/src/functions/Tooltips/parts.tsx

@@ -21,12 +21,12 @@ const Tooltips: amotify.fn.Tooltips.Methods = {
         'tooltips',
         ...tipsGroups,
       ],
-      closeOption: {
+      close_option: {
         aroundClick: true,
         elementBlur: params.parent,
         escapeKeyDown: true,
         pageTransit: true,
-        ...params.closeOption,
+        ...params.close_option,
       },
       type: 'custom',
       ...sheetParams

package/src/global/LaunchReactApplication.tsx

@@ -10,7 +10,6 @@ export const LaunchReactApplication: amotify.global.LaunchReactApplicationParams
     appearances
   } = props;
   let Base = $( baseElement )[ 0 ];
-
   if ( !Base || !reactElement ) return;
   if ( appearances ) {
     let {
@@ -25,7 +24,8 @@ export const LaunchReactApplication: amotify.global.LaunchReactApplicationParams
     if ( $.is.exist( themeColor ) ) amotify.config.update.themeColor( themeColor! );
     if ( $.is.exist( darkMode ) ) amotify.config.update.darkMode( darkMode! );
   }
-  let reactDom = nonRouter ? reactElement : <ReactRouterDom.BrowserRouter children={ reactElement } />;
 
-  ReactDOMCLient.createRoot( Base ).render( <React.StrictMode children={ reactDom } /> );
+  let reactDom = nonRouter ? reactElement : <ReactRouterDom.BrowserRouter children={ reactElement } />;
+  // ReactDOMCLient.createRoot( Base ).render( <React.StrictMode children={ reactDom } /> );
+  ReactDOMCLient.createRoot( Base ).render( <>{ reactDom }</> );
 }

package/src/global/styleConverter.tsx

@@ -295,7 +295,30 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
     }
 
     if ( [ 'dim','dark' ].includes( amotify.config.darkMode ) ) exStyles.boxShadow = 2;
-    ReturnParams = $.deepMerge( exStyles,ReturnParams );
+    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;

package/src/launch.tsx

@@ -6,6 +6,7 @@ if ( !global.$ ) console.log( `%c※can not find global.$,please read Jsmin to l
 
 let publicURI = 'https://public.comun.jp/';
 export { publicURI }
+import './preload';
 
 import './@jsminAmotifyExtension/_';
 import {
@@ -89,7 +90,6 @@ Object.freeze( global.amotify.fn );
 Object.freeze( global.amotify );
 
 import './@styles/@app.scss';
-import './preload';
 
 // document.oncontextmenu = () => {return false;}
 $( window ).addEvent( {

package/src/molecules/Accordion/parts.tsx

@@ -9,18 +9,19 @@ import {
 import style from './style.module.scss';
 
 const Component: React.FC<amotify.mols.Accordion.Params> = ( params ) => {
+  params = { ...params }
   let {
     accordionID = '',
     slideAnimation = 'fast',
-    open = false,
+    defaultOpen = false,
     ...others
   } = params;
 
   let [ val_wrapID ] = React.useState( $.uuidGen() );
   let [ val_contentID ] = React.useState( $.uuidGen() );
-  let [ val_open,set_open ] = React.useState( open );
+  let [ val_open,set_open ] = React.useState( defaultOpen );
 
-  if ( val_open != open ) set_open( open );
+  if ( val_open != defaultOpen ) set_open( defaultOpen );
 
   let Query = '[data-accordion-content-id="' + val_contentID + '"]';
 
@@ -95,15 +96,15 @@ const Component: React.FC<amotify.mols.Accordion.Params> = ( params ) => {
       value: {
         open: () => {
           set_open( true );
-          params.open = true;
+          // params.open = true;
         },
         close: () => {
           set_open( false );
-          params.open = false;
+          // params.open = false;
         },
         toggle: () => {
           set_open( !val_open );
-          params.open = !val_open;
+          // params.open = !val_open;
         }
       }
     } );

package/src/preload.tsx

@@ -29,7 +29,26 @@ let tags: Jsmin.CreateElement.Args[] = [
     tag: 'script',parent: document.head,attr: {
       src: 'https://kit.fontawesome.com/6745173b38.js',async: true
     }
-  },{
+  },
+
+  // <script src="https://public.comun.jp/@env/react/v18.0.4/reactProduction.js" defer></script>
+  // <script src="https://public.comun.jp/@env/react/v18.0.4/react-dom.js" defer></script>
+  // <script src="https://public.comun.jp/@env/react/v18.0.4/react-router-dom@v5.3.0.js" defer></script>
+  // {
+  //   tag: 'script',parent: document.head,attr: {
+  //     src: 'https://public.comun.jp/@env/react/v18.0.4/reactProduction.js',async: true
+  //   }
+  // },{
+  //   tag: 'script',parent: document.head,attr: {
+  //     src: 'https://public.comun.jp/@env/react/v18.0.4/react-dom.js',async: true
+  //   }
+  // },{
+  //   tag: 'script',parent: document.head,attr: {
+  //     src: 'https://public.comun.jp/@env/react/v18.0.4/react-router-dom@v5.3.0.js',async: true
+  //   }
+  // },
+
+  {
     tag: 'meta',parent: document.head,attr: {
       name: 'theme-color',
       content: '#45515c',

package/webpack.config.js

@@ -44,11 +44,11 @@ module.exports = ( () => {
         } )
       ],
     },
-    // externals: {
-    //   'react': 'React',
-    //   'react-dom': 'ReactDOM',
-    //   'react-router-dom': 'ReactRouterDOM'
-    // },
+    externals: {
+      // 'react': 'React',
+      // 'react-dom': 'ReactDOM',
+      // 'react-router-dom': 'ReactRouterDOM'
+    },
     plugins: [
       // new BundleAnalyzerPlugin(),
       new BrowserSync(