amotify 0.0.14 → 0.0.15

package/src/functions/Input/_.tsx

@@ -20,8 +20,9 @@ import {
 } 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 { 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';
 
@@ -126,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' ] }
@@ -187,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/ ) ? faClock : faCalendarWeek;
+      let icon = ( rawParams.restrict || '' ).match( /clock/ )
+        ? faClock
+        : faCalendarLines;
 
       rawParams.rightIndicator = <Input.Comps.RightIndicator
         padding={ 0 }
@@ -195,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={ () => {
@@ -264,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: '西暦' },
@@ -283,7 +285,7 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
 
           if ( component && component.resetEra ) component.resetEra( value );
         } }
-        rightIcon={ false }
+      // rightIcon={ false }
       /> }
       { ...params }
       era={ era }
@@ -468,10 +470,7 @@ export const Input: amotify.fn.Input.Methods = {
       } }
       paddingLeft={ 3 }
       rightIcon={ <Input.Comps.LeftIcon>
-        <Column gap={ 0 }>
-          <FAI.AngleUp />
-          <FAI.AngleDown />
-        </Column>
+        <FAI icon={ faAnglesUpDown } />
       </Input.Comps.LeftIcon> }
       limit={ 1 }
       { ...params }
@@ -564,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 }
       /> );
     },
@@ -576,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 {
@@ -590,7 +587,7 @@ export const Input: amotify.fn.Input.Methods = {
         ...others
       } = params;
 
-      return ( <Box
+      return <Box
         { ...DefaultStyles.IndicatorIcon }
         right={ '3/4' }
         className={ style.IndicatorIcon }
@@ -600,7 +597,7 @@ export const Input: amotify.fn.Input.Methods = {
           pointerEvents: 'none',
           ...others.freeCSS
         } }
-      /> );
+      />;
     },
     LeftIcon: ( params ) => {
       let {
@@ -608,7 +605,7 @@ export const Input: amotify.fn.Input.Methods = {
         ...others
       } = params;
 
-      return ( <Box
+      return <Box
         { ...DefaultStyles.IndicatorIcon }
         left={ '3/4' }
         className={ style.IndicatorIcon }
@@ -618,7 +615,7 @@ export const Input: amotify.fn.Input.Methods = {
           pointerEvents: 'none',
           ...others.freeCSS
         } }
-      /> );
+      />;
     },
   }
 }
@@ -753,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

@@ -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 );
-            } }
-          >
-            <FAI.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[]

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;
@@ -23,9 +74,6 @@
     }
   }
 }
-textarea {
-  transition-property: border, box-shadow, background-color !important;
-}
 @keyframes ShowCell {
   0% {}
   100% {
@@ -36,9 +84,6 @@ textarea {
 .IndicatorIcon {
   transform: translateY(-50%);
 }
-textarea {
-  resize: vertical;
-}
 .DigitCharacterCell {
   &.Combined {
     &:not(:first-child):not(:last-child) {

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/style.module.scss

@@ -1,6 +1,6 @@
 @use '@props' as *;
 :global {
-  .amotify_base_element_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;
   }

package/src/functions/Sheet/parts.tsx

@@ -186,7 +186,7 @@ const Comps = {
               .abort()
               .addClass( style.FixHeight )
               .callback( () => {
-                $( '#' + baseElements.rootID )
+                $( '#' + baseElements.rootID + '.AMOTIFY_be_origin' )
                   .addClass( style.FixScroll )
                 [ 0 ].scrollTop = Comps.mainSheetScrolls;
               } )

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

@@ -1,8 +1,8 @@
 @use '@props' as *;
 :global {
-  .amotify_base_element_sheet {
-    // position: absolute;
-    position: sticky;
+  .AMOTIFY_be_sheet {
+    position: fixed;
+    // position: sticky;
     top: 0;
     left: 0;
     right: 0;
@@ -16,7 +16,7 @@ html {
     .FixScroll {
       overflow: hidden !important;
       min-height: 0 !important;
-      height: calc( $viewHeight );
+      height: calc($viewHeight );
       width: calc(100vw);
       transition: $animation-time-long;
     }

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

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

package/src/global/LaunchReactApplication.tsx

@@ -30,7 +30,8 @@ export const LaunchReactApplication: amotify.global.LaunchReactApplicationParams
   let reactDom = nonRouter ? reactElement : <ReactRouterDom.BrowserRouter children={ reactElement } />;
 
   if ( isRoot ) {
-    base.addClass( 'amotify_base_element_root' );
+    $( '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 {

package/src/preload.tsx

@@ -35,19 +35,19 @@ let tags: Jsmin.CreateElement.Args[] = [
   },{
     parent: document.body,
     id: baseElements.sheetID,
-    className: 'amotify_base_element_sheet',
+    className: 'AMOTIFY_be AMOTIFY_be_sheet',
   },{
     parent: document.body,
     id: baseElements.snackbarID,
-    className: 'amotify_base_element_snackbar',
+    className: 'AMOTIFY_be AMOTIFY_be_snackbar',
   },{
     parent: document.body,
     id: baseElements.loaderID,
-    className: 'amotify_base_element_loader',
+    className: 'AMOTIFY_be AMOTIFY_be_loader',
   },{
     parent: document.body,
     id: baseElements.rootID,
-    className: 'amotify_base_element_root',
+    className: 'AMOTIFY_be AMOTIFY_be_root',
   },
 ];
 for ( let tag of tags ) {