amotify 0.0.13 → 0.0.15

package/src/functions/Button/_.tsx

@@ -6,7 +6,6 @@ import {
 
 import style from './style.module.scss';
 
-
 const Styles = {
   Size: (
     seed: amotify.fn.Buttons.Seeds,
@@ -58,66 +57,79 @@ const Styles = {
     size: amotify.fn.Buttons.Sizes,
     color: amotify.fn.Buttons.Colors
   ) => {
-    let styles: amotifyUniStyleParams = {}
+    let styles: amotifyUniStyleParams = {
+      display: 'inlineBlock',
+      fontSize: 'inherit',
+      fontWeight: 'inherit',
+      fontColor: 'inherit',
+      border: 'unset'
+    }
 
     if ( tone == 'Plain' ) return styles;
     if ( tone == 'Link' ) {
       styles.fontColor = 'theme';
       styles.textAlign = 'left';
+      styles.backgroundColor = 'trans';
     } else if ( tone == 'Normal' ) {
       styles = {
+        ...styles,
         backgroundColor: 'trans'
-      }
+      };
     } else if ( tone == 'Border' ) {
       styles = {
+        ...styles,
         backgroundColor: '1.layer.base',
         border: '2.normal',
+        borderStyle: 'solid',
         boxShadow: 0,
-      }
+      };
     } else if ( tone == 'Prime' ) {
       styles = {
+        ...styles,
         isBoldFont: true,
         fontColor: 'white',
         backgroundColor: color as any,
         boxShadow: 1,
         ssEffectsOnActive: [ 'shrink','ripple.white' ]
-      }
-
+      };
       if ( color == 'white' ) {
         styles = {
           ...styles,
           fontColor: 'theme',
           ssEffectsOnActive: [ 'shrink','ripple.cloud' ]
-        }
+        };
       }
     } else if ( tone == 'Sub' ) {
       styles = {
+        ...styles,
         fontColor: color as any,
         ssEffectsOnActive: 'shrink'
-      }
+      };
     } else if ( tone == 'Clear' ) {
       styles = {
+        ...styles,
         fontColor: color as any,
         backgroundColor: 'trans',
-      }
+      };
     } else if ( tone == 'FillToBorder' ) {
       styles = {
+        ...styles,
         fontColor: 'white',
         boxShadow: 1,
         borderWidth: 2,
-        borderStyle: 'solid',
         borderColor: color as any,
         backgroundColor: color as any,
-      }
+      };
     } else if ( tone == 'BorderToFill' ) {
       styles = {
+        ...styles,
         fontColor: color as any,
         boxShadow: 1,
+        border: '2.normal',
         borderWidth: 2,
-        borderStyle: 'solid',
         borderColor: color as any,
         backgroundColor: 'trans'
-      }
+      };
     }
 
     if ( tone != 'Link' ) {
@@ -174,14 +186,10 @@ const SeedWrapper = ( params: SeedWrapperInput ) => {
       style[ 'isLocked_' + isLocked ],
       style[ 'Tone_' + tone ],
       style[ 'Color_' + color ],
+      style[ 'Tone_' + tone + '_Color_' + color ],
     ].join( ' ' );
 
-    if ( [ 'Link','Plain' ].includes( Params.tone ) ) {
-      Params.className = [
-        Params.className,
-        style.uae_blur
-      ].join( ' ' );
-    } else {
+    if ( ![ 'Link','Plain' ].includes( Params.tone ) ) {
       Params.className = [
         Params.className,
         style.uae_remark

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

@@ -1,7 +1,8 @@
 @use '@props' as *;
 @use'@styleSet' as *;
-
 .Wrap {
+  text-decoration: none;
+  vertical-align: bottom;
   position: relative;
   @include DisableduserSelect();
   > * {
@@ -17,20 +18,17 @@
     background-color: $color-layer4 !important;
   }
 }
-.uae_ {
-  &remark {
-    &:active {
-      box-shadow: $shadow2 inset, 0 0 0 transparent !important;
-    }
-    &:focus {
-      box-shadow: 0 0 0 transparent inset, $shadow3;
-    }
+.uae_remark {
+  &:active {
+    box-shadow: $shadow2 inset, 0 0 0 transparent !important;
+  }
+  &:focus {
+    box-shadow: 0 0 0 transparent inset, $shadow3;
   }
-  &blur {}
 }
 .Tone_ {
-  &Sub, &Clear {
-    &.Color_ {
+  &Sub_, &Clear_ {
+    &Color_ {
       &theme {
         background-color: $color-theme-opacity-few;
       }
@@ -70,8 +68,8 @@
           text-decoration: underline !important;
         }
       }
-      &Normal {
-        &.Color_ {
+      &Normal_ {
+        &Color_ {
           &plain {
             background-color: $color-layer3;
             color: $font-color2;
@@ -94,14 +92,14 @@
           }
         }
       }
-      &Border {
+      &Border_ {
         background-color: $color-cloud;
       }
-      &Prime {
+      &Prime_ {
         opacity: .85;
       }
-      &Sub, &Clear {
-        &.Color_ {
+      &Sub_, &Clear_ {
+        &Color_ {
           &theme {
             background-color: $color-theme-opacity-low;
             color: $color-theme;
@@ -130,9 +128,9 @@
           }
         }
       }
-      &FillToBorder {
+      &FillToBorder_ {
         background-color: $color-layer1;
-        &.Color_ {
+        &Color_ {
           &theme {
             color: $color-theme;
           }
@@ -154,9 +152,9 @@
           }
         }
       }
-      &BorderToFill {
+      &BorderToFill_ {
         color: white;
-        &.Color_ {
+        &Color_ {
           &theme {
             background-color: $color-theme;
           }

package/src/functions/Cropper/parts.tsx

@@ -5,7 +5,7 @@ import {
 import {
   Box,
   Flex,
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Column,
@@ -20,6 +20,11 @@ import {
   Loader
 } from '@fn';
 
+import { faPalette } from '@fortawesome/pro-solid-svg-icons/faPalette';
+import { faBarsStaggered } from '@fortawesome/pro-solid-svg-icons/faBarsStaggered';
+import { faRotateLeft } from '@fortawesome/pro-solid-svg-icons/faRotateLeft';
+import { faRotateRight } from '@fortawesome/pro-solid-svg-icons/faRotateRight';
+
 import style from './style.module.scss';
 
 type CoreProps = {
@@ -906,8 +911,9 @@ const Comps: {
       <>
         <Column gap={ '1/3' } >
           <Box>
-            <FAIcon.Rotate
+            <FAI.Rotate
               fontSize='3.paragraph'
+              fontColor='4.thin'
             /> Rotate
           </Box>
           <Row.Separate
@@ -921,22 +927,22 @@ const Comps: {
                 params.set_rotate( next );
               } }
             >
-              <FAIcon.RotateLeft /> 左に回転
+              <FAI icon={ faRotateLeft } /> 左に回転
             </Buttons.Button.Border.R>
             <Buttons.Button.Border.R
               onClick={ () => {
                 params.set_rotate( ( params.val_rotate + 90 ) % 360 );
               } }
             >
-              右に回転 <FAIcon.RotateRight />
+              右に回転 <FAI icon={ faRotateRight } />
             </Buttons.Button.Border.R>
           </Row.Separate>
         </Column>
         <Column gap={ '1/3' } >
           <Box>
-            <FAIcon
+            <FAI.Search
               fontSize='3.paragraph'
-              d='magnifying-glass-plus'
+              fontColor='4.thin'
             /> Zoom
           </Box>
           <Box paddingLeft={ 2 }>
@@ -961,9 +967,10 @@ const Comps: {
         </Column>
         <Column gap={ '1/3' } >
           <Box>
-            <FAIcon
+            <FAI
+              icon={ faPalette }
               fontSize='3.paragraph'
-              d='palette'
+              fontColor='4.thin'
             /> Gray Scale
           </Box>
           <Box paddingLeft={ 2 }>
@@ -984,9 +991,10 @@ const Comps: {
         </Column>
         <Column gap={ '1/3' }>
           <Box>
-            <FAIcon
+            <FAI
+              icon={ faBarsStaggered }
               fontSize='3.paragraph'
-              d='bars-staggered'
+              fontColor='4.thin'
             /> Tone
           </Box>
           <Box paddingLeft={ 2 }>

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

@@ -1,5 +1,6 @@
 @use '@props' as *;
 .Wrap {
+  vertical-align: bottom;
   &.Use_ {
     &profile {
       max-width: calc($unit1 * 38);

package/src/functions/Effects/Ripple.tsx

@@ -1,7 +1,7 @@
 import style from './style.module.scss';
 
 type InfoProps = {
-  RippleElement: Jsmin.Method
+  RippleElement: Jsmin.Methods
   startedAt: number
   size: number
 }

package/src/functions/Input/Chips/Selector.tsx

@@ -4,8 +4,7 @@ import {
 } from '@global';
 import {
   Box,
-  Flex,
-  FAIcon,
+  FAI,
   Span
 } from '@atoms';
 import {
@@ -20,6 +19,8 @@ import {
   Sheet
 } from '@fn';
 
+import { faWindowMinimize } from '@fortawesome/pro-solid-svg-icons/faWindowMinimize';
+
 import style from './style.module.scss';
 
 const Selector = ( params: {
@@ -196,6 +197,7 @@ const Selector = ( params: {
         }
 
         return <Buttons.Button.Clear.R
+          key={ index }
           color='cloud'
           padding={ '1/3' }
           tabIndex={ -1 }
@@ -256,7 +258,7 @@ const Selector = ( params: {
             fontSize={ '1.mini' }
             fontColor='3.blur'
           >
-            <FAIcon.Search />
+            <FAI.Search />
           </Input.Comps.LeftIcon> }
           onKeyDown={ ( event ) => {
             let {
@@ -312,9 +314,7 @@ const Selector = ( params: {
             Sheet.close( params.selectorID! );
           } }
         >
-          <FAIcon
-            d='window-minimize'
-          />
+          <FAI icon={ faWindowMinimize } />
         </Buttons.Button.Border.S>
       </Row.Separate>
       <Row.Separate>
@@ -386,9 +386,9 @@ export const ChipsInputFNs: amotify.fn.Input.Chips.FNs = {
 
     SelectorCellComponent = SelectorCellComponent || ( ( params ) => {
       return <Row.Left>
-        <FAIcon.CheckCircle
-          isSolidIcon={ params.isSelected }
-          isRegularIcon={ !params.isSelected }
+        <FAI.CheckCircle
+          // isSolidIcon={ params.isSelected }
+          // isRegularIcon={ !params.isSelected }
           fontColor={ params.isSelected ? 'theme' : '6.clear' }
         />
         { params.label }

package/src/functions/Input/Chips/_.tsx

@@ -2,7 +2,7 @@ import {
   React
 } from '@global';
 import {
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Column,
@@ -85,7 +85,7 @@ const DataWrapping: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) =>
           props.openCallback();
         } }
       >
-        <FAIcon.Plus />
+        <FAI.Plus />
         追加する
       </Buttons.Button.Sub.R>;
     } }
@@ -106,9 +106,15 @@ const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
     value = [],
     limit,
 
+    leftIndicator,rightIndicator,leftIcon,rightIcon,
+
     SelectedCellComponent,
     AddButtonComponent,
 
+    componentID,
+    defaultOptions,
+    enableFormSubmit,
+
     ...others
   } = params;
   AddButtonComponent = AddButtonComponent!;
@@ -202,6 +208,7 @@ const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
       }
     }
     return <SelectedCellComponent
+      key={ JSON.stringify( value ) }
       value={ value }
       label={ label }
       removeCallback={ removeCallback }
@@ -214,7 +221,7 @@ const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
           removeCallback();
         } }
       >
-        <FAIcon.Times />
+        <FAI.Times />
       </Buttons.Button.Sub.S> }
       openCallback={ () => {
         OpenSelector();

package/src/functions/Input/DigitCharacters.tsx

@@ -77,7 +77,7 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
     className = '',
     digits,
     numericOnly = false,
-    enable_form_submit,
+    enableFormSubmit,
 
     checkValidationAtFirst,
     onChange,onKeyDown,
@@ -87,7 +87,7 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
     value = '',
 
     override,
-    statusID,
+
     componentID,
     listStyles,
     ...others
@@ -127,27 +127,24 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
 
     let Styles: React.CSSProperties = {}
 
+    let ClassName = className;
+
     if ( params.combineInput ) {
-      if ( index == 0 ) {
-        Styles = {
-          borderTopLeftRadius: 'inherit',
-          borderBottomLeftRadius: 'inherit'
-        }
-      } else if ( index == digits - 1 ) {
-        Styles = {
-          borderTopRightRadius: 'inherit',
-          borderBottomRightRadius: 'inherit'
-        }
-      }
+      ClassName = [
+        className,
+        style.DigitCharacterCell,
+        style.Combined
+      ].join( ' ' );
     }
 
     Digits.push( <input
+      key={ index }
       type={ 'text' }
       inputMode={ params.inputMode || 'text' }
       value={ Character }
       data-form-name={ form }
       id={ 'Digit-' + index + '-' + val_status.componentID }
-      className={ className }
+      className={ ClassName }
       style={ {
         ...params.style,
         ...Styles
@@ -177,7 +174,7 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
           let dir = Number( key == 'ArrowRight' ) * 2 - 1;
           nextFocusIndex = index + dir;
         } else {
-          if ( enable_form_submit ) SubmitForm( event );
+          if ( enableFormSubmit ) SubmitForm( event );
 
           ( () => {
             let regExp = code.match( /^(Key(.)|Digit(\d)|Numpad(\d))/ );
@@ -206,6 +203,7 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
           $( '#Digit-' + nextFocusIndex + '-' + val_status.componentID ).focus();
         }
       } }
+      onChange={ () => { } }
     /> );
   }
 

package/src/functions/Input/File/_.tsx

@@ -5,7 +5,7 @@ import {
 import {
   Box,
   Flex,
-  FAIcon
+  FAI
 } from '@atoms';
 import {
   Column,
@@ -26,6 +26,8 @@ import {
 } from '../core';
 import style from './style.module.scss';
 
+import { faCloudArrowUp } from '@fortawesome/pro-solid-svg-icons/faCloudArrowUp';
+
 function DefaultValidation( props: {
   value: any
   params: any
@@ -64,6 +66,9 @@ const FileComponent: React.FC<amotify.fn.Input.Filer.PlainParams> = ( params ) =
 
     cellStyles,cellClassName,
 
+    componentID,status_id,
+    enableFormSubmit,
+
     ...others
   } = params;
 
@@ -250,15 +255,13 @@ const FileList: React.FC<{
             isRounded
             className={ style.AddIcon }
           >
-            <FAIcon
-              d={ 'cloud-arrow-up' }
+            <FAI
+              icon={ faCloudArrowUp }
               className={ style.Icon }
               fontColor={ 'theme' }
+              fontSize='4.thirdTitle'
               backgroundColor={ 'tcOpLow' }
-              padding={ 0 }
-              unitWidth={ 4 }
-              unitHeight={ 4 }
-              isRounded
+              ssSphere={ 4 }
             />
           </Box>
           <Box>
@@ -316,70 +319,31 @@ const FileCell: React.FC<{
     .replace( /\s/,'' )
     .replace( /(.*)\.(.*)$/,'$1 $2' ).split( ' ' );
 
-  let FileType = {
-    name: '不明',
-    icon: 'fal file'
-  }
+  let FileName = 'ファイル';
   if ( type.match( /image/ ) ) {
-    FileType = {
-      name: type.replace( /image\//,'' ),
-      icon: 'image'
-    }
+    FileName = type.replace( /image\//,'' );
   } else if ( type.match( /pdf/ ) ) {
-    FileType = {
-      name: 'PDF',
-      icon: 'file-pdf'
-    }
+    FileName = 'PDF';
   } else if ( type.match( /csv/ ) ) {
-    FileType = {
-      name: 'CSV',
-      icon: 'file-csv'
-    }
+    FileName = 'CSV';
   } else if ( type.match( /spreadsheet/ ) ) {
-    FileType = {
-      name: 'SpreadSheet',
-      icon: 'file-excel'
-    }
+    FileName = 'SpreadSheet';
   } else if ( type.match( /presentation/ ) ) {
-    FileType = {
-      name: 'PowerPoint',
-      icon: 'file-powerpoint'
-    }
+    FileName = 'PowerPoint';
   } else if ( type.match( /word/ ) ) {
-    FileType = {
-      name: 'Word',
-      icon: 'file-word'
-    }
+    FileName = 'Word';
   } else if ( type.match( /zip/ ) ) {
-    FileType = {
-      name: 'Zip',
-      icon: 'file-zipper'
-    }
+    FileName = 'Zip';
   } else if ( type.match( /powerpoint/ ) ) {
-    FileType = {
-      name: 'PowerPoint',
-      icon: 'file-powerpoint'
-    }
+    FileName = 'PowerPoint';
   } else if ( type.match( /html/ ) ) {
-    FileType = {
-      name: 'HTML',
-      icon: 'fab html5'
-    }
+    FileName = 'HTML';
   } else if ( type.match( /js/ ) ) {
-    FileType = {
-      name: 'JS',
-      icon: 'fab js-square'
-    }
+    FileName = 'JavaScript';
   } else if ( type.match( /css/ ) ) {
-    FileType = {
-      name: 'CSS',
-      icon: 'fab css3-alt'
-    }
+    FileName = 'CSS';
   } else if ( type.match( /text\/plain/ ) ) {
-    FileType = {
-      name: 'テキスト',
-      icon: 'file-lines'
-    }
+    FileName = 'テキスト';
   }
 
   React.useEffect( () => {
@@ -397,10 +361,9 @@ const FileCell: React.FC<{
       gap={ 1 }
       className={ className }
     >
-      <FAIcon
+      <FAI.File
         fontSize={ '4.thirdTitle' }
-        fontColor={ 'theme' }
-        d={ FileType.icon }
+        fontColor={ '4.thin' }
       />
       <Box flexSizing={ 0 }>
         <Box>
@@ -413,13 +376,18 @@ const FileCell: React.FC<{
               { fileName }
               { fileNameEdit ?
                 <Buttons.Button.Clear.R
+                  ssSphere={ 2.5 }
+                  flexSizing={ 'none' }
+                  color='cloud'
+                  fontColor='4.thin'
                   padding={ '1/3' }
                   ssEffectsOnActive={ 'expand' }
-                  children={ <FAIcon d='pen' /> }
                   onClick={ () => {
                     set_edit( true );
                   } }
-                /> : null
+                >
+                  <FAI.Pen />
+                </Buttons.Button.Clear.R> : null
               }
             </> : <>
               <Column
@@ -440,7 +408,7 @@ const FileCell: React.FC<{
                     required
                     id={ FileID }
                     form={ 'form-' + FileID }
-                    enable_form_submit
+                    enableFormSubmit
                     value={ name }
                     onKeyDown={ ( event ) => {
                       let { key } = event;
@@ -509,11 +477,13 @@ const FileCell: React.FC<{
             fontSize={ '1.mini' }
             fontColor={ '4.thin' }
             flexSizing={ 0 }
-            children={ FileType.name + 'ファイル / ' + Size + 'B' }
+            children={ FileName + 'ファイル / ' + Size + 'B' }
           />
         </> : null }
       </Box>
       <Buttons.Button.Sub.R
+        color='cloud'
+        fontColor='4.thin'
         ssSphere={ 3 }
         onClick={ () => {
           let nextFiles = [ ...val_status.dataValue ];
@@ -529,7 +499,7 @@ const FileCell: React.FC<{
           } )
         } }
       >
-        <FAIcon.Times />
+        <FAI.Times />
       </Buttons.Button.Sub.R>
     </Flex>
   );