amotify 0.0.13 → 0.0.15

package/src/functions/Sheet/parts.tsx

@@ -1,4 +1,5 @@
 import {
+  baseElements,
   React,
   LaunchReactApplication,
   useStore
@@ -7,7 +8,7 @@ import {
   Img,
   Box,
   Flex,
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Column,
@@ -32,13 +33,14 @@ const Comps = {
       open: boolean
       hold_state: boolean
       params: Params
-      created_at: Time.Method
+      created_at: Time.Methods
     }
   },
   Launch: function ( params: Params ) {
     params = {
       sheetID: $.uuidGen(),
       sheetGroups: params.sheetGroups || [],
+      backgroundEffect: true,
       overwrap: params.type == 'custom' ? true : false,
       hold_state: false,
       ...params,
@@ -66,10 +68,11 @@ const Comps = {
       created_at: $.Time()
     }
 
-    $( '#SHEET' )
+    $( '#' + baseElements.sheetID )
       .append( `<div id="Sheet-${ params.sheetID }"></div>` )
       .callback( () => {
         LaunchReactApplication( {
+          isRoot: false,
           baseElement: '#Sheet-' + params.sheetID,
           reactElement: Content,
         } );
@@ -167,8 +170,8 @@ const Comps = {
     },[] );
     React.useEffect( () => {
       $.fnScope( () => {
-        // #ROOT
         if ( !isNewSheet ) return;
+        if ( !params.backgroundEffect ) return;
 
         Comps.subSheetLength = Comps.subSheetLength + ( val_open ? 1 : -1 );
         if ( val_open ) {
@@ -183,7 +186,9 @@ const Comps = {
               .abort()
               .addClass( style.FixHeight )
               .callback( () => {
-                $( '#ROOT' )[ 0 ].scrollTop = Comps.mainSheetScrolls;
+                $( '#' + baseElements.rootID + '.AMOTIFY_be_origin' )
+                  .addClass( style.FixScroll )
+                [ 0 ].scrollTop = Comps.mainSheetScrolls;
               } )
               .addClass( [
                 style.FloatMainSheet,
@@ -202,7 +207,7 @@ const Comps = {
             .removeClass( style.FixHeight )
             .callback( ( html ) => {
               html[ 0 ].scrollTop = Comps.mainSheetScrolls | 0;
-              $( '#ROOT' )[ 0 ].scrollTop = 0;
+              $( '#' + baseElements.rootID )[ 0 ].scrollTop = 0;
             } );
         }
       } );
@@ -238,7 +243,7 @@ const Comps = {
 
     let [ Tcate,Tpos ] = type.split( '.' );
 
-    return ( <Box
+    return <Box
       className={ [
         style.Wrap,
         style[ 'Tcate_' + Tcate ],
@@ -269,7 +274,7 @@ const Comps = {
           { ...val_params }
         />
       </Column>
-    </Box> );
+    </Box>;
   },
   Types: {
     Normal: ( params: amotify.fn.Sheet.NormalParams ) => {
@@ -577,9 +582,7 @@ const Comps = {
           height={ 1 }
           { ...baseStyles }
         >
-          <Flex
-            verticalAlign='center'
-            flexChilds='even'
+          <Row.Separate
             padding={ '1/2' }
             backgroundColor='1.layer.base'
             position='relative'
@@ -587,39 +590,37 @@ const Comps = {
               userSelect: 'none'
             } }
           >
-            <Row.Center>
+            <Row.Center
+              flexSizing={ 0 }
+              padding={ '2/3' }
+              onMouseDown={ Effects.Start }
+              onTouchStart={ Effects.Start }
+              ssPushable
+              isRounded
+              freeCSS={ {
+                cursor: 'grab',
+                userSelect: 'none'
+              } }
+            >
               <Box
-                padding={ '2/3' }
-                onMouseDown={ Effects.Start }
-                onTouchStart={ Effects.Start }
-                ssPushable
+                unitWidth={ 6 }
+                unitHeight={ '1/2' }
+                backgroundColor='5.layer.darker'
                 isRounded
-                freeCSS={ {
-                  cursor: 'grab',
-                  userSelect: 'none'
-                } }
-              >
-                <Box
-                  unitWidth={ 6 }
-                  unitHeight={ '1/2' }
-                  backgroundColor='5.layer.darker'
-                  isRounded
-                  className={ style.DragBar }
-                />
-              </Box>
+                className={ style.DragBar }
+              />
             </Row.Center>
-            <Row.Right>
-              <Buttons.Button.Sub.R
-                color='cloud'
-                ssSphere={ 2 }
-                onClick={ () => {
-                  Sheet.close( sheetID! );
-                } }
-              >
-                <FAIcon.Times />
-              </Buttons.Button.Sub.R>
-            </Row.Right>
-          </Flex>
+
+            <Buttons.Button.Sub.R
+              color='cloud'
+              ssSphere={ 2 }
+              onClick={ () => {
+                Sheet.close( sheetID! );
+              } }
+            >
+              <FAI.Times />
+            </Buttons.Button.Sub.R>
+          </Row.Separate>
           <Box
             backgroundColor={ '1.layer.base' }
             flexSizing={ 0 }
@@ -640,6 +641,8 @@ const Comps = {
         close_option,
         hold_state,
         overwrap,
+        openAfter,
+        closeAfter,
         ...others
       } = params;
 
@@ -896,7 +899,7 @@ const Sheet: amotify.fn.Sheet.Methods = {
                   Sheet.close( sheetID! );
                 } }
               >
-                <FAIcon.Times />
+                <FAI.Times />
               </Buttons.Button.Sub.R>
             </Row.Separate>
             <Layout.SwipeView

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

@@ -1,9 +1,8 @@
 @use '@props' as *;
-//SheetBase
 :global {
-  #SHEET {
-    // position: absolute;
-    position: sticky;
+  .AMOTIFY_be_sheet {
+    position: fixed;
+    // position: sticky;
     top: 0;
     left: 0;
     right: 0;
@@ -14,32 +13,26 @@
 }
 html {
   &.FixHeight {
-    :global {
-      #ROOT {
-        overflow: hidden !important;
-        min-height: 0 !important;
-        height: calc($viewHeight);
-        width: calc(100vw);
-        transition: $animation-time-long;
-      }
+    .FixScroll {
+      overflow: hidden !important;
+      min-height: 0 !important;
+      height: calc($viewHeight );
+      width: calc(100vw);
+      transition: $animation-time-long;
     }
   }
   &.FloatMainSheet {
-    @media (max-width:$breakPoint) {
-      &.Type_ {
-        &bottom {
-          overflow: hidden;
-        }
+    @media (max-width:$breakPoint ) {
+      &.Type_bottom {
+        overflow: hidden;
       }
     }
-    :global {
-      #ROOT {
-        opacity: .8 !important;
-        pointer-events: none;
-        transform-origin: center center;
-        transform: scale(.96);
-        border-radius: calc(calc(2vw + 2vh) / 2);
-      }
+    .FixScroll {
+      opacity: .8 !important;
+      pointer-events: none;
+      transform-origin: center center;
+      transform: scale(.96);
+      border-radius: calc(calc(2vw + 2vh) / 2);
     }
   }
 }

package/src/functions/SnackBar/parts.tsx

@@ -1,4 +1,5 @@
 import {
+  baseElements,
   LaunchReactApplication,
   useStore,
   React
@@ -6,7 +7,7 @@ import {
 import {
   Box,
   Flex,
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Row,
@@ -104,7 +105,7 @@ const Cell: React.FC<ElementParams> = ( props ) => {
           SnackBar.remove( snackID );
         } }
       >
-        <FAIcon.Times />
+        <FAI.Times />
       </Buttons.Button.Clear.R>
     </Row.Separate>
   }
@@ -204,7 +205,8 @@ const SnackBarsWrap: React.FC<{}> = () => {
 }
 
 LaunchReactApplication( {
-  baseElement: '#SNACKBARS',
+  isRoot: false,
+  baseElement: '#' + baseElements.snackbarID,
   reactElement: <SnackBarsWrap />,
   nonRouter: true
 } );

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

@@ -1,6 +1,6 @@
 @use '@props' as *;
 :global {
-  #SNACKBARS {
+  .AMOTIFY_be_snackbar {
     z-index: 8;
     position: absolute;
   }

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

@@ -6,7 +6,7 @@ import {
   Flex,
   Box,
   Span,
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Column,
@@ -18,6 +18,11 @@ import {
   Sheet,
 } from '@fn';
 
+import { faArrowUp } from '@fortawesome/pro-solid-svg-icons/faArrowUp';
+import { faArrowDown } from '@fortawesome/pro-solid-svg-icons/faArrowDown';
+import { faArrowUpArrowDown } from '@fortawesome/pro-solid-svg-icons/faArrowUpArrowDown';
+import { faBarsFilter } from '@fortawesome/pro-solid-svg-icons/faBarsFilter';
+
 import style from '../style.module.scss';
 
 import {
@@ -144,12 +149,14 @@ const Components = {
       let orderable = order.enabled && order.column[ colIndex ];
       let filterable = filter.enabled && filter.column[ colIndex ];
 
-      let OrderButton = orderable ? <FAIcon
+      let OrderButton = orderable ? <FAI
         fontSize={ '1.mini' }
         fontColor={ colIndex == orderIndex ? '1.clear' : '5.translucent' }
-        d={ colIndex == orderIndex
-          ? 'arrow-' + [ 'up','down' ][ Number( orderDirection == 'DESC' ) ]
-          : 'arrow-down-arrow-up' }
+        icon={ colIndex == orderIndex
+          ? orderDirection == 'DESC'
+            ? faArrowDown
+            : faArrowUp
+          : faArrowUpArrowDown }
       /> : null;
 
       let FilterButton = <></>;
@@ -268,14 +275,13 @@ const Components = {
               fontSize={ '1.mini' }
               className={ style[ 'Filtering_' + !!filterList.length ] }
               id={ FilterModaButtonID }
-              children={ <FAIcon
-                d='bars-filter'
-              /> }
               onClick={ ( event ) => {
                 event.stopPropagation();
                 Sheet.open( SheetParams );
               } }
-            />
+            >
+              <FAI icon={ faBarsFilter } />
+            </Buttons.Button.Sub.S>
           </Box>
         }
       }
@@ -828,7 +834,7 @@ export const DataComps: amotify.fn.Tables.Data.Comps = {
         fontColor={ '5.translucent' }
         right={ '2/3' }
       >
-        <FAIcon.Search />
+        <FAI.Search />
       </Input.Comps.RightIcon> }
       override='force'
       value={ status.searchKeyword }
@@ -896,7 +902,7 @@ export const DataComps: amotify.fn.Tables.Data.Comps = {
             DataFNs.setPageIndex( params.tableID,status.paging.currentPageIndex - 1 );
           } }
         >
-          <FAIcon.ChevronLeft />
+          <FAI.ChevronLeft />
         </Buttons.Button.Sub.R>
         <Buttons.Button.Sub.R
           ssSphere={ 3 }
@@ -908,7 +914,7 @@ export const DataComps: amotify.fn.Tables.Data.Comps = {
             DataFNs.setPageIndex( params.tableID,status.paging.currentPageIndex + 1 );
           } }
         >
-          <FAIcon.ChevronRight />
+          <FAI.ChevronRight />
         </Buttons.Button.Sub.R>
       </Row.Right>
     </Row.Center> );

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

@@ -3,7 +3,7 @@ import {
   React
 } from '@global';
 import {
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Buttons,
@@ -15,6 +15,8 @@ import {
   DefaultCellSystemStyles
 } from '../_';
 
+import { faGripDotsVertical } from '@fortawesome/pro-solid-svg-icons/faGripDotsVertical';
+
 import style from '../style.module.scss';
 
 const HeadRow: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
@@ -141,9 +143,7 @@ const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
             } );
           } }
         >
-          <FAIcon
-            d='grip-dots-vertical'
-          />
+          <FAI icon={ faGripDotsVertical } />
         </Buttons.Button.Clear.R>
       </Comps.TH> );
     }
@@ -205,7 +205,7 @@ const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
         cellClassName
       ].join( ' ' ) }
     >
-      <FAIcon.ArrowRight
+      <FAI.ArrowRight
         fontColor='theme'
       />
     </Comps.TH> );
@@ -315,15 +315,13 @@ export const DragTable: React.FC<amotify.fn.Tables.Drag.Params> = ( params ) =>
               parent: event.currentTarget,
               padding: [ 0,1 ],
               content: <Tooltips.Comps.Body>
-                <FAIcon
-                  d='grip-dots-vertical'
-                />
+                <FAI icon={ faGripDotsVertical } />
                 ボタンをドラッグして順序を変更
               </Tooltips.Comps.Body>
             } );
           } }
         >
-          <FAIcon.QuestionCircle />
+          <FAI.QuestionCircle />
         </Buttons.Button.Plain>,
         padding: [ 0,1 ],
         unitWidth: 4

package/src/functions/Table/_.tsx

@@ -5,7 +5,7 @@ import {
 
 import {
   Box,
-  FAIcon
+  FAI
 } from '@atoms';
 
 export const Comps: amotify.fn.Tables.CompsMethods = {
@@ -27,7 +27,7 @@ export const Comps: amotify.fn.Tables.CompsMethods = {
     type: 'td',
     unitWidth: 4,
     // data: '',
-    children: <FAIcon.AngleRight
+    children: <FAI.AngleRight
       fontColor={ 'theme' }
       fontSize={ '4.thirdTitle' }
     />

package/src/global/LaunchReactApplication.tsx

@@ -1,16 +1,18 @@
+import { baseElements } from '@global';
 import React from 'react';
 import ReactDOMCLient from 'react-dom/client';
 import * as ReactRouterDom from 'react-router-dom';
 
 export const LaunchReactApplication: amotify.global.LaunchReactApplicationParams = ( props ) => {
   let {
-    baseElement = '#ROOT',
+    baseElement = '#' + baseElements.rootID,
     reactElement,
     nonRouter = false,
+    isRoot = true,
     appearances
   } = props;
-  let Base = $( baseElement )[ 0 ];
-  if ( !Base || !reactElement ) return;
+  let base = $( baseElement );
+  if ( !base[ 0 ] || !reactElement ) return;
   if ( appearances ) {
     let {
       roundness,
@@ -26,6 +28,16 @@ export const LaunchReactApplication: amotify.global.LaunchReactApplicationParams
   }
 
   let reactDom = nonRouter ? reactElement : <ReactRouterDom.BrowserRouter children={ reactElement } />;
-  // ReactDOMCLient.createRoot( Base ).render( <React.StrictMode children={ reactDom } /> );
-  ReactDOMCLient.createRoot( Base ).render( <>{ reactDom }</> );
+
+  if ( isRoot ) {
+    $( 'body' ).addClass( 'AMOTIFY_be_body' );
+    base.addClass( 'AMOTIFY_be AMOTIFY_be_root AMOTIFY_be_origin' );
+    if ( base[ 0 ].id ) {
+      baseElements.rootID = base[ 0 ].id;
+    } else {
+      base.setAttribute( 'id',baseElements.rootID );
+    }
+  }
+
+  ReactDOMCLient.createRoot( base[ 0 ] ).render( <>{ reactDom }</> );
 }

package/src/launch.tsx

@@ -1,8 +1,16 @@
-import 'jsmin-front/dist/@types';
+import 'jsmin-front/@types';
+import 'jsmin-front/dist/jsmin';
 
 import '../@types/_';
 
 if ( !global.$ ) console.log( `%c※can not find global.$,please read Jsmin to launch amotify.`,'color:orange;' );
+import { launchID } from './@variables';
+export const baseElements = {
+  rootID: 'ROOT_' + launchID,
+  loaderID: 'LOADER_' + launchID,
+  sheetID: 'SHEET_' + launchID,
+  snackbarID: 'SNACKBARS_' + launchID
+}
 
 let publicURI = 'https://public.comun.jp/';
 export { publicURI }
@@ -22,7 +30,7 @@ import {
 import {
   Flex,
   FlexBr,
-  FAIcon,
+  FAI,
   Placeholder,
   Grid,
   Logo,
@@ -40,7 +48,6 @@ import {
   Row
 } from '@mols';
 import {
-  DisplayStyleInput
 } from '@orgs';
 import {
   PlayGround
@@ -73,9 +80,9 @@ const amotify: amotify = {
     ReactRouterDOM,
     pageTransit,useStore,useRecycle,StyleConverter,LaunchReactApplication
   },
-  atoms: { Flex,FlexBr,FAIcon,Placeholder,Grid,Logo,Box,Span,Paragraph,Img },
+  atoms: { Flex,FlexBr,FAI,Placeholder,Grid,Logo,Box,Span,Paragraph,Img },
   mols: { List,Accordion,LinkifyText,Text,Column,Row },
-  orgs: { DisplayStyleInput },
+  orgs: {},
   temps: { PlayGround },
   fn: { Buttons,Input,Table,Layout,Sheet,SnackBar,Loader,Tooltips,Effects,Cropper }
 }

package/src/molecules/Accordion/parts.tsx

@@ -14,6 +14,7 @@ const Component: React.FC<amotify.mols.Accordion.Params> = ( params ) => {
     accordionID = '',
     slideAnimation = 'fast',
     defaultOpen = false,
+    override = false,
     ...others
   } = params;
 
@@ -21,7 +22,9 @@ const Component: React.FC<amotify.mols.Accordion.Params> = ( params ) => {
   let [ val_contentID ] = React.useState( $.uuidGen() );
   let [ val_open,set_open ] = React.useState( defaultOpen );
 
-  if ( val_open != defaultOpen ) set_open( defaultOpen );
+  if ( val_open != defaultOpen ) {
+    if ( override ) set_open( defaultOpen );
+  }
 
   let Query = '[data-accordion-content-id="' + val_contentID + '"]';
 

package/src/molecules/LinkifyText/parts.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Buttons
@@ -10,7 +10,6 @@ const {
   Anchor
 } = Buttons;
 
-
 export const LinkifyText: React.FC<amotify.mols.LinkifyTextProps> = ( props ) => {
   let {
     text,
@@ -39,7 +38,7 @@ export const LinkifyText: React.FC<amotify.mols.LinkifyTextProps> = ( props ) =>
           href={ url }
           newTab
         >
-          { url } <FAIcon d='arrow-up-right-from-square' />
+          { url }
         </Anchor.Link> );
       }
     }

package/src/preload.tsx

@@ -1,3 +1,5 @@
+import { baseElements } from './launch';
+
 let tags: Jsmin.CreateElement.Args[] = [
   {
     tag: 'meta',parent: document.head,attr: {
@@ -24,42 +26,29 @@ let tags: Jsmin.CreateElement.Args[] = [
       rel: 'stylesheet',
       async: true
     }
-  },
-  {
-    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',
     },
     id: 'ThemeColorMetaTag'
+  },{
+    parent: document.body,
+    id: baseElements.sheetID,
+    className: 'AMOTIFY_be AMOTIFY_be_sheet',
+  },{
+    parent: document.body,
+    id: baseElements.snackbarID,
+    className: 'AMOTIFY_be AMOTIFY_be_snackbar',
+  },{
+    parent: document.body,
+    id: baseElements.loaderID,
+    className: 'AMOTIFY_be AMOTIFY_be_loader',
+  },{
+    parent: document.body,
+    id: baseElements.rootID,
+    className: 'AMOTIFY_be AMOTIFY_be_root',
   },
-  { parent: document.body,id: 'SHEET' },
-  { parent: document.body,id: 'TOOLTIPS' },
-  { parent: document.body,id: 'SNACKBARS' },
-  { parent: document.body,id: 'LOADER' },
-  { parent: document.body,id: 'ROOT' },
 ];
 for ( let tag of tags ) {
   let { id } = tag;

package/tsconfig.json

@@ -24,13 +24,24 @@
       "@styleSet": [
         "src/@styles/styleSet"
       ],
-
-      "@global": [ "src/@global" ],
-      "@atoms": [ "src/@atoms" ],
-      "@mols": [ "src/@molecules" ],
-      "@orgs": [ "src/@organisms" ],
-      "@temps": [ "src/@templates" ],
-      "@fn": [ "src/@functions" ],
+      "@global": [
+        "src/@global"
+      ],
+      "@atoms": [
+        "src/@atoms"
+      ],
+      "@mols": [
+        "src/@molecules"
+      ],
+      "@orgs": [
+        "src/@organisms"
+      ],
+      "@temps": [
+        "src/@templates"
+      ],
+      "@fn": [
+        "src/@functions"
+      ],
     },
     "strict": true,
     "skipLibCheck": true,
@@ -47,7 +58,7 @@
     // "noUnusedParameters": true,
     "strictNullChecks": true,
     "esModuleInterop": true,
-    "noEmitOnError": true,
+    "noEmitOnError": false
   },
   "exclude": [
     "node_modules",