amotify 0.0.13 → 0.0.14

package/src/functions/Input/Time/style.module.scss

@@ -60,13 +60,20 @@
   .RightButton:active {
     left: $unit1_3 !important;
   }
-  .Cell.Checked {
+  .Cell.isThisMonth {
     color: #fff !important;
-    background-color: $color-theme !important;
+    background-color: $color-warning !important;
     box-shadow: $shadow2;
   }
 }
 .miniYearInput {
   width: 4em !important;
   text-align: center;
+}
+.CalendarDay {
+  &.isToday_true {
+    color: white !important;
+    background-color: $color-warning !important;
+    font-weight: bold;
+  }
 }

package/src/functions/Input/_.tsx

@@ -6,7 +6,7 @@ import {
 import {
   Box,
   Flex,
-  FAIcon,
+  FAI,
   Span
 } from '@atoms';
 import {
@@ -19,6 +19,10 @@ import {
   Tooltips
 } from '@fn';
 
+import { faEye } from '@fortawesome/pro-solid-svg-icons/faEye';
+import { faClock } from '@fortawesome/pro-solid-svg-icons/faClock';
+import { faCalendarWeek } from '@fortawesome/pro-solid-svg-icons/faCalendarWeek';
+
 import style from './style.module.scss';
 
 import { HiddenInput } from './Hidden';
@@ -49,12 +53,12 @@ const UniComponent: React.FC<{
 
   props = { ...props }
   props.params = {
-    enable_form_submit: true,
+    enableFormSubmit: true,
     // override: 'beforeModified',
+    status_id: $.uuidGen(),
     override: 'never',
     name: $.uuidGen(),
     id: $.uuidGen(),
-    statusID: $.uuidGen(),
     'aria-label': 'Input-' + val_componentID,
     ...props.params,
     componentID: val_componentID,
@@ -150,8 +154,8 @@ const TextInputs: amotify.fn.Input.Text.Methods = {
                   } );
               } }
             >
-              <FAIcon
-                d='eye'
+              <FAI
+                icon={ faEye }
                 freeCSS={ {
                   pointerEvents: 'none'
                 } }
@@ -183,7 +187,7 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
     rawParams.componentID = val_componentID;
 
     if ( $.is.nullish( rawParams.rightIndicator ) ) {
-      let icon = ( rawParams.restrict || '' ).match( /clock/ ) ? 'clock' : 'calendar-lines';
+      let icon = ( rawParams.restrict || '' ).match( /clock/ ) ? faClock : faCalendarWeek;
 
       rawParams.rightIndicator = <Input.Comps.RightIndicator
         padding={ 0 }
@@ -205,7 +209,7 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
             if ( component ) component.openPicker();
           } }
         >
-          <FAIcon d={ icon } />
+          <FAI icon={ icon } />
         </Buttons.Button.Sub.R>
       </Input.Comps.RightIndicator>
     }
@@ -389,10 +393,9 @@ export const Input: amotify.fn.Input.Methods = {
     }
     if ( rawParams.combineInput ) {
       rawParams = {
-        digits: rawParams.digits,
         textAlign: 'center',
         width: 0,
-        borderRadius: 0,
+        ...rawParams,
         freeCSS: {
           minWidth: 12 * 2,
           marginRight: -1,
@@ -425,7 +428,7 @@ export const Input: amotify.fn.Input.Methods = {
         className={ style.IndicatorIcon }
         { ...rawParams.rightIconStyles }
       >
-        <FAIcon.AngleDown />
+        <FAI.AngleDown />
       </Input.Comps.RightIcon>
     }
     if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3;
@@ -466,8 +469,8 @@ export const Input: amotify.fn.Input.Methods = {
       paddingLeft={ 3 }
       rightIcon={ <Input.Comps.LeftIcon>
         <Column gap={ 0 }>
-          <FAIcon.AngleUp />
-          <FAIcon.AngleDown />
+          <FAI.AngleUp />
+          <FAI.AngleDown />
         </Column>
       </Input.Comps.LeftIcon> }
       limit={ 1 }
@@ -533,6 +536,15 @@ export const Input: amotify.fn.Input.Methods = {
         { ...params }
       /> );
     },
+    RequiredShortSign: ( params ) => {
+      return ( <Span
+        fontColor='nega'
+        padding={ [ '1/4','1/3' ] }
+        borderRadius={ '3.tone.tertiary' }
+        children={ '*' }
+        { ...params }
+      /> );
+    },
     OmitSign: ( params ) => {
       return ( <Span
         fontColor='white'

package/src/functions/Input/core.tsx

@@ -5,7 +5,7 @@ import {
 import {
   Box,
   Flex,
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Column,
@@ -83,7 +83,7 @@ export const BoxWrapper: React.FC<BoxWrapperParams> = ( props ) => {
               } as any );
             } }
           >
-            <FAIcon.Times />
+            <FAI.Times />
           </Buttons.Button.Normal.R> : rightIcon }
         </Flex>
         { params.rightIndicator }
@@ -118,11 +118,16 @@ const GenNotices: React.FC<{
   let Notices = notice.map( ( cell ) => {
     let { type,label } = cell;
 
+    let ICON =
+      type == 'invalid' ? FAI.Times :
+        type == 'warn' ? FAI.Exclamation :
+          FAI.Check;
+
     return <Row.Left
       gap={ 0 }
       borderRadius={ '2.tone.secondary' }
     >
-      <FAIcon
+      <ICON
         flexCenter
         fontSize='3.paragraph'
         fontColor={ {
@@ -130,11 +135,6 @@ const GenNotices: React.FC<{
           'warn': 'warn',
           'valid': 'posi',
         }[ type ] as 'theme' }
-        d={ {
-          'invalid': 'times',
-          'warn': 'exclamation',
-          'valid': 'check'
-        }[ type ] }
       />
       <Box
         fontColor='white'
@@ -293,7 +293,7 @@ export const CommonEffects: {
     if ( !component ) return;
     if (
       params.value != val_status.dataValue &&
-      params.statusID != component.statusID
+      params.status_id != component.status_id
     ) {
       set_status( {
         ...val_status,
@@ -303,7 +303,7 @@ export const CommonEffects: {
         eventID: $.uuidGen()
       } );
     }
-    component.statusID = params.statusID;
+    component.status_id = params.status_id;
   } )();
 
   React.useEffect( () => {

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

@@ -20,10 +20,9 @@
     &:focus-within {
       border-color: $color-theme !important;
       box-shadow: 0 0 0 $unit1_3 $color-theme-opacity-low;
-    } 
+    }
   }
 }
-
 textarea {
   transition-property: border, box-shadow, background-color !important;
 }
@@ -37,7 +36,21 @@ textarea {
 .IndicatorIcon {
   transform: translateY(-50%);
 }
-
 textarea {
   resize: vertical;
+}
+.DigitCharacterCell {
+  &.Combined {
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0 !important;
+    }
+    &:first-child {
+      border-top-right-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
+    }
+    &:last-child {
+      border-top-left-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
+  }
 }

package/src/functions/Layout/PageNotFound.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   Box,
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Column,
@@ -29,10 +29,8 @@ export const PageNotFound: React.FC<{}> = () => {
         maxWidth: 12 * 30
       } }
     >
-      <FAIcon.LinkSlash
+      <FAI.LinkSlash
         fontColor={ 'theme' }
-        iconFamily='classic'
-        isDuotoneIcon
         freeCSS={ {
           fontSize: '3rem'
         } }

package/src/functions/Layout/PageRouter.tsx

@@ -23,10 +23,9 @@ const userEffect = ( beforeCallback?: Function,afterCallback?: Function,afterFir
     value: navigate
   } );
 
-  amotify.fn.Sheet.closeAll( true );
-
   React.useEffect( () => {
     if ( mounted.current ) {
+      amotify.fn.Sheet.closeAll( true );
       $( '#TopNavigation' )
         .callback( ( topHeader ) => {
           let Body = $( document.body );
@@ -39,7 +38,7 @@ const userEffect = ( beforeCallback?: Function,afterCallback?: Function,afterFir
     } else {
       mounted.current = true;
     }
-  },[ location ] );
+  },[ location.pathname ] );
 
   if ( beforeCallback ) beforeCallback( location );
 

package/src/functions/Loader/parts.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  baseElements,
   LaunchReactApplication,
   useStore
 } from '@global';
@@ -92,7 +93,8 @@ const Loader: amotify.fn.Loader.Methods = {
 export { Loader }
 
 LaunchReactApplication( {
-  baseElement: '#LOADER',
+  isRoot: false,
+  baseElement: '#' + baseElements.loaderID,
   reactElement: <>
     <Top />
     <Corner />

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

@@ -1,6 +1,6 @@
 @use '@props' as *;
 :global {
-  #LOADER {
+  .amotify_base_element_loader {
     z-index: 10;
     position: absolute;
   }

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 )
+                  .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,7 +1,6 @@
 @use '@props' as *;
-//SheetBase
 :global {
-  #SHEET {
+  .amotify_base_element_sheet {
     // position: absolute;
     position: sticky;
     top: 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_base_element_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> );