amotify 0.0.13 → 0.0.15

package/src/functions/Input/_.tsx

@@ -6,7 +6,7 @@ import {
 import {
   Box,
   Flex,
-  FAIcon,
+  FAI,
   Span
 } from '@atoms';
 import {
@@ -19,6 +19,11 @@ import {
   Tooltips
 } from '@fn';
 
+import { faEye } from '@fortawesome/pro-solid-svg-icons/faEye';
+import { faClock } from '@fortawesome/pro-regular-svg-icons/faClock';
+import { faCalendarLines } from '@fortawesome/pro-regular-svg-icons/faCalendarLines';
+import { faAnglesUpDown } from '@fortawesome/pro-solid-svg-icons/faAnglesUpDown';
+
 import style from './style.module.scss';
 
 import { HiddenInput } from './Hidden';
@@ -49,12 +54,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,
@@ -122,10 +127,9 @@ const TextInputs: amotify.fn.Input.Text.Methods = {
             padding={ 0 }
           >
             <Buttons.Button.Normal.R
-              padding={ '3/4' }
+              padding={ [ 0,1 ] }
               fontColor='theme'
-              borderTopLeftRadius={ 0 }
-              borderBottomLeftRadius={ 0 }
+              borderRadius={ 'inherit' }
               backgroundColor='inherit'
               height={ 1 }
               ssEffectsOnActive={ [ 'expand' ] }
@@ -150,8 +154,8 @@ const TextInputs: amotify.fn.Input.Text.Methods = {
                   } );
               } }
             >
-              <FAIcon
-                d='eye'
+              <FAI
+                icon={ faEye }
                 freeCSS={ {
                   pointerEvents: 'none'
                 } }
@@ -183,7 +187,9 @@ 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
+        : faCalendarLines;
 
       rawParams.rightIndicator = <Input.Comps.RightIndicator
         padding={ 0 }
@@ -191,13 +197,13 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
         <Buttons.Button.Sub.R
           color='cloud'
           border='unset'
-          padding={ '3/4' }
+          padding={ [ 0,1 ] }
           fontColor='theme'
-          borderTopLeftRadius={ 0 }
-          borderBottomLeftRadius={ 0 }
+          borderRadius={ 'inherit' }
           backgroundColor='inherit'
+          flexCenter
           height={ 1 }
-          ssEffectsOnActive={ [ 'ripple.theme' ] }
+          ssEffectsOnActive={ [ 'ripple.cloud' ] }
           tabIndex={ -1 }
           id={ 'Picker-' + rawParams.componentID }
           onClick={ () => {
@@ -205,7 +211,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>
     }
@@ -260,11 +266,11 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
         value={ era }
         tone={ params.tone }
         flexCenter
-        borderTopRightRadius={ 0 }
-        borderBottomRightRadius={ 0 }
+        borderTopRightRadius={ '2/3' }
+        borderBottomRightRadius={ '2/3' }
+        height={ 1 }
         freeCSS={ {
-          whiteSpace: 'nowrap',
-          marginRight: -1
+          whiteSpace: 'nowrap'
         } }
         options={ [
           { value: 'year',label: '西暦' },
@@ -279,7 +285,7 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
 
           if ( component && component.resetEra ) component.resetEra( value );
         } }
-        rightIcon={ false }
+      // rightIcon={ false }
       /> }
       { ...params }
       era={ era }
@@ -389,10 +395,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 +430,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;
@@ -465,10 +470,7 @@ export const Input: amotify.fn.Input.Methods = {
       } }
       paddingLeft={ 3 }
       rightIcon={ <Input.Comps.LeftIcon>
-        <Column gap={ 0 }>
-          <FAIcon.AngleUp />
-          <FAIcon.AngleDown />
-        </Column>
+        <FAI icon={ faAnglesUpDown } />
       </Input.Comps.LeftIcon> }
       limit={ 1 }
       { ...params }
@@ -533,6 +535,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'
@@ -552,9 +563,8 @@ export const Input: amotify.fn.Input.Methods = {
 
       return ( <Box
         { ...DefaultStyles.Indicator( tone! ) }
-        borderRight='unset'
-        borderTopRightRadius={ 0 }
-        borderBottomRightRadius={ 0 }
+        borderTopRightRadius={ '2/3' }
+        borderBottomRightRadius={ '2/3' }
         { ...others }
       /> );
     },
@@ -564,13 +574,12 @@ export const Input: amotify.fn.Input.Methods = {
         ...others
       } = params;
 
-      return ( <Box
+      return <Box
         { ...DefaultStyles.Indicator( tone! ) }
-        borderLeft='unset'
-        borderTopLeftRadius={ 0 }
-        borderBottomLeftRadius={ 0 }
+        borderTopLeftRadius={ '2/3' }
+        borderBottomLeftRadius={ '2/3' }
         { ...others }
-      /> );
+      />;
     },
     RightIcon: ( params ) => {
       let {
@@ -578,7 +587,7 @@ export const Input: amotify.fn.Input.Methods = {
         ...others
       } = params;
 
-      return ( <Box
+      return <Box
         { ...DefaultStyles.IndicatorIcon }
         right={ '3/4' }
         className={ style.IndicatorIcon }
@@ -588,7 +597,7 @@ export const Input: amotify.fn.Input.Methods = {
           pointerEvents: 'none',
           ...others.freeCSS
         } }
-      /> );
+      />;
     },
     LeftIcon: ( params ) => {
       let {
@@ -596,7 +605,7 @@ export const Input: amotify.fn.Input.Methods = {
         ...others
       } = params;
 
-      return ( <Box
+      return <Box
         { ...DefaultStyles.IndicatorIcon }
         left={ '3/4' }
         className={ style.IndicatorIcon }
@@ -606,7 +615,7 @@ export const Input: amotify.fn.Input.Methods = {
           pointerEvents: 'none',
           ...others.freeCSS
         } }
-      /> );
+      />;
     },
   }
 }
@@ -741,12 +750,14 @@ const DefaultStyles = {
       ...DefaultStyles.Input( params.tone ),
       ...params,
       ...params.leftIndicator ? {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0
+        borderTopLeftRadius: '2/3',
+        borderBottomLeftRadius: '2/3',
+        marginLeft: '1/4'
       } : null,
       ...params.rightIndicator ? {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
+        borderTopRightRadius: '2/3',
+        borderBottomRightRadius: '2/3',
+        marginRight: '1/4'
       } : null,
       className: [
         style.Input,

package/src/functions/Input/core.tsx

@@ -5,7 +5,7 @@ import {
 import {
   Box,
   Flex,
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Column,
@@ -44,56 +44,55 @@ export const BoxWrapper: React.FC<BoxWrapperParams> = ( props ) => {
 
   if ( val_status.eventType == 'init' && !params.checkValidationAtFirst ) val_validate.notice = [];
 
-  return (
-    <Box
-      position='relative'
-      { ...wrapStyles }
-      id={ 'BoxWrapper-' + val_status.componentID }
+  return <Box
+    position='relative'
+    { ...wrapStyles }
+    id={ 'BoxWrapper-' + val_status.componentID }
+  >
+    <Flex
+      flexWrap={ false }
+      // height='100%'
+      className={ style.Wrapper }
     >
+      { params.leftIndicator }
       <Flex
-        flexWrap={ false }
-      // height='100%'
+        position='relative'
+        flexSizing={ 'auto' }
       >
-        { params.leftIndicator }
-        <Flex
-          position='relative'
-          flexSizing={ 'auto' }
+        { leftIcon }
+        { children }
+        { clearButton && !!val_status.dataValue ? <Buttons.Button.Normal.R
+          ssSphere={ 2 }
+          flexCenter
+          fontColor={ '5.translucent' }
+          ssEffectsOnActive={ [ 'ripple.theme' ] }
+          position='absolute'
+          right={ 1 }
+          top={ '50%' }
+          freeCSS={ {
+            zIndex: 3
+          } }
+          className={ style.IndicatorIcon }
+          onClick={ () => {
+            set_status( {
+              ...val_status,
+              dataValue: '',
+              formatValue: '',
+              eventType: 'update',
+              eventID: $.uuidGen()
+            } as any );
+          } }
         >
-          { leftIcon }
-          { children }
-          { clearButton && !!val_status.dataValue ? <Buttons.Button.Normal.R
-            ssSphere={ 2 }
-            flexCenter
-            fontColor={ '5.translucent' }
-            ssEffectsOnActive={ [ 'ripple.theme' ] }
-            position='absolute'
-            right={ 1 }
-            top={ '50%' }
-            freeCSS={ {
-              zIndex: 3
-            } }
-            className={ style.IndicatorIcon }
-            onClick={ () => {
-              set_status( {
-                ...val_status,
-                dataValue: '',
-                formatValue: '',
-                eventType: 'update',
-                eventID: $.uuidGen()
-              } as any );
-            } }
-          >
-            <FAIcon.Times />
-          </Buttons.Button.Normal.R> : rightIcon }
-        </Flex>
-        { params.rightIndicator }
+          <FAI.Times />
+        </Buttons.Button.Normal.R> : rightIcon }
       </Flex>
-      <GenNotices
-        notice={ val_validate.notice }
-        val_status={ val_status }
-      />
-    </Box>
-  );
+      { params.rightIndicator }
+    </Flex>
+    <GenNotices
+      notice={ val_validate.notice }
+      val_status={ val_status }
+    />
+  </Box>;
 }
 const GenNotices: React.FC<{
   notice: amotify.fn.Input.Validation.NoticeTypes[]
@@ -118,11 +117,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 +134,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 +292,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 +302,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

@@ -1,4 +1,55 @@
 @use '@props' as *;
+.Wrapper {
+  textarea {
+    display: block;
+    width: 100%;
+    min-height: $unit4;
+    resize: vertical;
+    transition-property: border, box-shadow, background-color !important;
+  }
+  input, select, textarea {
+    display: inline-block;
+    &[ disabled] {
+      box-shadow: none !important;
+      background-color: $color-layer3 !important;
+      color: $font-color5 !important;
+      filter: grayscale(50%);
+      cursor: not-allowed !important;
+    }
+  }
+  input, textarea {
+    cursor: text;
+    &::placeholder {
+      font-family: inherit;
+      color: $font-color5;
+    }
+  }
+  input {
+    min-width: 0;
+    display: block;
+    &[ type="text"], &[ type="number"] {
+      width: 100%;
+    }
+    &[ type="number"] {
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+      }
+    }
+    &[ type="radio"], &[ type="checkbox"], &[ type="file"] {
+      opacity: 0;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+      position: absolute;
+      appearance: none;
+    }
+    &:-webkit-autofill {
+      box-shadow: 0 0 0 100rem $color-layer3 inset !important;
+      -webkit-text-fill-color: $font-color3;
+    }
+  }
+}
 .Input {
   &:focus, &:active {
     z-index: 1;
@@ -20,13 +71,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;
-}
 @keyframes ShowCell {
   0% {}
   100% {
@@ -37,7 +84,18 @@ 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/Layout/RootViewController/parts.tsx

@@ -52,7 +52,7 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
 
     let Chilren: ReactElement = children;
 
-    return ( <Column
+    return <Column
       key={ Key }
       className={ [
         className,
@@ -84,7 +84,7 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
         </Box>
       </Flex>
       { footerNavigation }
-    </Column> );
+    </Column>;
   },
   TopNavigation: ( params ) => {
     let {
@@ -109,7 +109,7 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
         .setStyleProperty( '--topBase',topBase + 'px' );
     },[] );
 
-    return ( <Flex
+    return <Flex
       key={ val_componentID }
       data-id={ val_componentID }
       flexSizing={ 'none' }
@@ -124,20 +124,8 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
         style.TopNav
       ].join( ' ' ) }
     >
-      <Box
-        position='absolute'
-        left={ 0 }
-        right={ 0 }
-        backgroundColor='inherit'
-        className={ style.TopCover }
-        freeCSS={ {
-          top: '-1rem',
-          height: '2rem',
-          zIndex: -1
-        } }
-      />
       { children }
-    </Flex> );
+    </Flex>;
   },
   SideNavigation: ( params ) => {
     let {

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_be_loader {
     z-index: 10;
     position: absolute;
   }
@@ -189,6 +189,7 @@
     animation: spin .5s linear infinite;
   }
   svg {
+    height: 100%;
     position: absolute;
     fill: none;
   }