amotify 0.0.24 → 0.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "UI Component for React",
   "main": "dist/launch.js",
   "types": "dist/@types.d.ts",
@@ -28,10 +28,11 @@
   },
   "homepage": "https://github.com/IkkoKoyama/amotify#readme",
   "dependencies": {
+    "@fortawesome/fontawesome-common-types": "^6.5.1",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/pro-regular-svg-icons": "^6.4.2",
-    "@fortawesome/pro-solid-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "jsmin-front": "^0.0.17",
     "react": "^18.2.0",

package/src/@jsminAmotifyExtension/spreadSheet.tsx

@@ -115,7 +115,6 @@ declare global {
       sheets.forEach( ( sheet,index ) => {
         let {
           sheetName,
-          headers = [],
           rows,
           merges = [],
           styles = []
@@ -124,21 +123,10 @@ declare global {
 
         workbook.addWorksheet( sheetName );
         const worksheet = workbook.getWorksheet( sheetName );
-
-        let Headers = headers.map( ( header,index ) => {
-          let { key,value } = header;
-          return {
-            key: key,
-            header: value
-          }
-        } );
-
-        worksheet.columns = Headers;
         worksheet.addRows( rows );
 
-        for ( let [ from,to ] of merges ) {
+        for ( let [ from,to ] of merges )
           if ( from && to ) worksheet.mergeCells( from + ':' + to );
-        }
         for ( let style of styles ) {
           let {
             type,

package/src/@styles/init.scss

@@ -27,9 +27,6 @@ html {
   transition: opacity $animation-time-middle;
   background-color: $color-dark;
 }
-amotify-app {
-  all: initial !important;
-}
 .AMOTIFY_be_origin {
   max-width: 200rem;
   min-height: $viewHeight;

package/src/atoms/FAI/parts.tsx

@@ -3,57 +3,60 @@ import {
   Box
 } from '../Various/parts';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  FontAwesomeIcon
+} from '@fortawesome/react-fontawesome';
+import * as FontawesomeCore from '@fortawesome/fontawesome-svg-core';
 
-import { faUser } from '@fortawesome/pro-regular-svg-icons/faUser';
-import { faTimes } from '@fortawesome/pro-regular-svg-icons/faTimes';
-import { faAngleRight } from '@fortawesome/pro-regular-svg-icons/faAngleRight';
-import { faAngleLeft } from '@fortawesome/pro-regular-svg-icons/faAngleLeft';
-import { faAngleUp } from '@fortawesome/pro-regular-svg-icons/faAngleUp';
-import { faAngleDown } from '@fortawesome/pro-regular-svg-icons/faAngleDown';
-import { faChevronLeft } from '@fortawesome/pro-regular-svg-icons/faChevronLeft';
-import { faChevronRight } from '@fortawesome/pro-regular-svg-icons/faChevronRight';
-import { faChevronUp } from '@fortawesome/pro-regular-svg-icons/faChevronUp';
-import { faChevronDown } from '@fortawesome/pro-regular-svg-icons/faChevronDown';
-import { faCaretLeft } from '@fortawesome/pro-regular-svg-icons/faCaretLeft';
-import { faCaretRight } from '@fortawesome/pro-regular-svg-icons/faCaretRight';
-import { faCaretUp } from '@fortawesome/pro-regular-svg-icons/faCaretUp';
-import { faCaretDown } from '@fortawesome/pro-regular-svg-icons/faCaretDown';
-import { faArrowLeft } from '@fortawesome/pro-regular-svg-icons/faArrowLeft';
-import { faArrowRight } from '@fortawesome/pro-regular-svg-icons/faArrowRight';
-import { faArrowUp } from '@fortawesome/pro-regular-svg-icons/faArrowUp';
-import { faArrowDown } from '@fortawesome/pro-regular-svg-icons/faArrowDown';
-import { faRotate } from '@fortawesome/pro-regular-svg-icons/faRotate';
-import { faRedo } from '@fortawesome/pro-regular-svg-icons/faRedo';
-import { faCheck } from '@fortawesome/pro-regular-svg-icons/faCheck';
-import { faCheckCircle } from '@fortawesome/pro-regular-svg-icons/faCheckCircle';
-import { faQuestion } from '@fortawesome/pro-regular-svg-icons/faQuestion';
-import { faQuestionCircle } from '@fortawesome/pro-regular-svg-icons/faQuestionCircle';
-import { faExclamation } from '@fortawesome/pro-regular-svg-icons/faExclamation';
-import { faExclamationTriangle } from '@fortawesome/pro-regular-svg-icons/faExclamationTriangle';
-import { faHome } from '@fortawesome/pro-regular-svg-icons/faHome';
-import { faShare } from '@fortawesome/pro-regular-svg-icons/faShare';
-import { faSearch } from '@fortawesome/pro-regular-svg-icons/faSearch';
-import { faYenSign } from '@fortawesome/pro-regular-svg-icons/faYenSign';
-import { faHeart } from '@fortawesome/pro-regular-svg-icons/faHeart';
-import { faStar } from '@fortawesome/pro-regular-svg-icons/faStar';
-import { faEdit } from '@fortawesome/pro-regular-svg-icons/faEdit';
-import { faPen } from '@fortawesome/pro-regular-svg-icons/faPen';
-import { faCopy } from '@fortawesome/pro-regular-svg-icons/faCopy';
-import { faFile } from '@fortawesome/pro-regular-svg-icons/faFile';
-import { faTrashAlt } from '@fortawesome/pro-regular-svg-icons/faTrashAlt';
-import { faBars } from '@fortawesome/pro-regular-svg-icons/faBars';
-import { faDownload } from '@fortawesome/pro-regular-svg-icons/faDownload';
-import { faLink } from '@fortawesome/pro-regular-svg-icons/faLink';
-import { faLinkSlash } from '@fortawesome/pro-regular-svg-icons/faLinkSlash';
-import { faExternalLinkAlt } from '@fortawesome/pro-regular-svg-icons/faExternalLinkAlt';
-import { faGear } from '@fortawesome/pro-regular-svg-icons/faGear';
-import { faPlus } from '@fortawesome/pro-regular-svg-icons/faPlus';
-import { faMinus } from '@fortawesome/pro-regular-svg-icons/faMinus';
-import { faEllipsisH } from '@fortawesome/pro-regular-svg-icons/faEllipsisH';
-import { faEllipsisV } from '@fortawesome/pro-regular-svg-icons/faEllipsisV';
-import { faPaperPlane } from '@fortawesome/pro-regular-svg-icons/faPaperPlane';
-import { faImage } from '@fortawesome/pro-regular-svg-icons/faImage';
+import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
+import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp';
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
+import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
+import { faCaretLeft } from '@fortawesome/free-solid-svg-icons/faCaretLeft';
+import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
+import { faCaretUp } from '@fortawesome/free-solid-svg-icons/faCaretUp';
+import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
+import { faArrowUp } from '@fortawesome/free-solid-svg-icons/faArrowUp';
+import { faArrowDown } from '@fortawesome/free-solid-svg-icons/faArrowDown';
+import { faRotate } from '@fortawesome/free-solid-svg-icons/faRotate';
+import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons/faCheckCircle';
+import { faQuestion } from '@fortawesome/free-solid-svg-icons/faQuestion';
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons/faQuestionCircle';
+import { faExclamation } from '@fortawesome/free-solid-svg-icons/faExclamation';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
+import { faHome } from '@fortawesome/free-solid-svg-icons/faHome';
+import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
+import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
+import { faYenSign } from '@fortawesome/free-solid-svg-icons/faYenSign';
+import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart';
+import { faStar } from '@fortawesome/free-solid-svg-icons/faStar';
+import { faEdit } from '@fortawesome/free-solid-svg-icons/faEdit';
+import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
+import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
+import { faFile } from '@fortawesome/free-solid-svg-icons/faFile';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
+import { faBars } from '@fortawesome/free-solid-svg-icons/faBars';
+import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
+import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
+import { faLinkSlash } from '@fortawesome/free-solid-svg-icons/faLinkSlash';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
+import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
+import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
+import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus';
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
+import { faPaperPlane } from '@fortawesome/free-solid-svg-icons/faPaperPlane';
+import { faImage } from '@fortawesome/free-solid-svg-icons/faImage';
 
 const FAIComps: React.FC<amotify.atoms.FAI.FAIParams> = ( params ) => {
   let {
@@ -72,7 +75,7 @@ const FAIComps: React.FC<amotify.atoms.FAI.FAIParams> = ( params ) => {
   >
     <Box freeCSS={ { aspectRatio: 1 } }>
       <FontAwesomeIcon
-        icon={ icon }
+        icon={ icon as any }
         fixedWidth
         size='sm'
         { ...iconParams }

package/src/functions/Cropper/parts.tsx

@@ -20,10 +20,10 @@ 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 { faPalette } from '@fortawesome/free-solid-svg-icons/faPalette';
+import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons/faBarsStaggered';
+import { faRotateLeft } from '@fortawesome/free-solid-svg-icons/faRotateLeft';
+import { faRotateRight } from '@fortawesome/free-solid-svg-icons/faRotateRight';
 
 import style from './style.module.scss';
 

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

@@ -19,8 +19,6 @@ import {
   Sheet
 } from '@fn';
 
-import { faWindowMinimize } from '@fortawesome/pro-solid-svg-icons/faWindowMinimize';
-
 import style from './style.module.scss';
 
 const Selector = ( params: {
@@ -314,7 +312,7 @@ const Selector = ( params: {
             Sheet.close( params.selectorID! );
           } }
         >
-          <FAI icon={ faWindowMinimize } />
+          <FAI.Times />
         </Buttons.Button.Border.S>
       </Row.Separate>
       <Row.Separate>

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

@@ -26,7 +26,7 @@ import {
 } from '../core';
 import style from './style.module.scss';
 
-import { faCloudArrowUp } from '@fortawesome/pro-solid-svg-icons/faCloudArrowUp';
+import { faCloudArrowUp } from '@fortawesome/free-solid-svg-icons/faCloudArrowUp';
 
 function DefaultValidation( props: {
   value: any
@@ -230,7 +230,7 @@ const FileList: React.FC<{
 
   if ( Left > 0 ) {
     Files.push(
-      <Buttons.Label.Plain
+      <label
         key={ 'AddButton' }
         className={ [ params.cellClassName,style.AddButton ].join( ' ' ) }
         htmlFor={ params.id }
@@ -268,13 +268,15 @@ const FileList: React.FC<{
               isBoldFont
             />
             <Box
-              children={ 'または、ファイルをドロップ' }
+              isBoldFont
               fontColor={ '4.thin' }
               fontSize={ '0.xs' }
-            />
+            >
+              ファイルをドロップ
+            </Box>
           </Box>
         </Row.Center>
-      </Buttons.Label.Plain>
+      </label>
     )
   }
 

package/src/functions/Input/_.tsx

@@ -19,10 +19,12 @@ 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';
+// as FontawesomeCore.IconProp
+import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
+import { faClock } from '@fortawesome/free-regular-svg-icons/faClock';
+import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons/faCalendarAlt';
+import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp';
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
 
 import style from './style.module.scss';
 
@@ -187,7 +189,7 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
     if ( $.is.nullish( rawParams.rightIndicator ) ) {
       let icon = ( rawParams.restrict || '' ).match( /clock/ )
         ? faClock
-        : faCalendarLines;
+        : faCalendarAlt;
 
       rawParams.rightIndicator = <Input.Comps.RightIndicator
         padding={ 0 }
@@ -464,7 +466,12 @@ export const Input: amotify.fn.Input.Methods = {
       } }
       paddingLeft={ 3 }
       rightIcon={ <Input.Comps.LeftIcon>
-        <FAI icon={ faAnglesUpDown } />
+        <Column
+          gap={ 0 }
+        >
+          <FAI icon={ faAngleUp } />
+          <FAI icon={ faAngleDown } freeCSS={ { marginTop: -6 } } />
+        </Column>
       </Input.Comps.LeftIcon> }
       limit={ 1 }
       { ...params }
@@ -641,6 +648,7 @@ const DefaultStyles = {
       Styles = {
         ...Styles,
         borderRadius: 0,
+        border: 'unset',
         borderBottom: true,
         backgroundColor: 'cloud'
       }

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

@@ -57,10 +57,10 @@
   }
   &:focus {
     border-color: $color-theme !important;
-    box-shadow: 0 0 0 $unit1_3 $color-theme-opacity-low;
+    box-shadow: 0 0 0 transparent inset, 0 0 0 $unit1_3 $color-theme-opacity-low;
   }
   &:active {
-    box-shadow: none;
+    box-shadow: 0 0 0 transparent inset, 0 0 0 transparent;
     transition: $animation-time-long;
   }
   &.InputCover {
@@ -70,7 +70,7 @@
     }
     &:focus-within {
       border-color: $color-theme !important;
-      box-shadow: 0 0 0 $unit1_3 $color-theme-opacity-low;
+      box-shadow: 0 0 0 transparent inset, 0 0 0 $unit1_3 $color-theme-opacity-low;
     }
   }
 }

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

@@ -18,10 +18,10 @@ 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 { faArrowUp } from '@fortawesome/free-solid-svg-icons/faArrowUp';
+import { faArrowDown } from '@fortawesome/free-solid-svg-icons/faArrowDown';
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
+import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
 
 import style from '../style.module.scss';
 
@@ -156,7 +156,7 @@ const Components = {
           ? orderDirection == 'DESC'
             ? faArrowDown
             : faArrowUp
-          : faArrowUpArrowDown }
+          : faArrowRight }
       /> : null;
 
       let FilterButton = <></>;
@@ -280,7 +280,7 @@ const Components = {
                 Sheet.open( SheetParams );
               } }
             >
-              <FAI icon={ faBarsFilter } />
+              <FAI icon={ faFilter } />
             </Buttons.Button.Sub.S>
           </Box>
         }

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

@@ -15,7 +15,7 @@ import {
   DefaultCellSystemStyles
 } from '../_';
 
-import { faGripDotsVertical } from '@fortawesome/pro-solid-svg-icons/faGripDotsVertical';
+import { faGripVertical } from '@fortawesome/free-solid-svg-icons/faGripVertical';
 
 import style from '../style.module.scss';
 
@@ -94,6 +94,8 @@ const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
     {
       Cols.push( <Comps.TH
         key={ 'DragOrigin' }
+        padding={ 0 }
+        borderRight
         { ...cellStyles }
         { ...DefaultCellSystemStyles( {
           top: rowIndex == 0 && !head,
@@ -111,8 +113,6 @@ const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
           isBody: true,
           isHeader: false,
         } ) : {} }
-        padding={ 0 }
-        borderRight
         className={ [
           style.Cell,
           style.Draggable,
@@ -121,7 +121,7 @@ const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
       >
         <Buttons.Button.Clear.R
           className={ style.DragableButton }
-          fontColor={ '5.translucent' }
+          fontColor={ '4.thin' }
           fontSize={ '3.paragraph' }
           margin={ 'auto' }
           tabIndex={ -1 }
@@ -143,7 +143,7 @@ const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
             } );
           } }
         >
-          <FAI icon={ faGripDotsVertical } />
+          <FAI icon={ faGripVertical } />
         </Buttons.Button.Clear.R>
       </Comps.TH> );
     }
@@ -306,23 +306,22 @@ export const DragTable: React.FC<amotify.fn.Tables.Drag.Params> = ( params ) =>
   if ( params.head ) {
     params.head = [
       {
-        children: <Buttons.Button.Plain
+        children: <Buttons.Button.Clear.R
           ssSphere={ 3 }
           fontSize={ '3.paragraph' }
           fontColor={ 'theme' }
           onMouseOver={ ( event ) => {
             Tooltips.open( {
               parent: event.currentTarget,
-              padding: [ 0,1 ],
               content: <Tooltips.Comps.Body>
-                <FAI icon={ faGripDotsVertical } />
+                <FAI icon={ faGripVertical } />
                 ボタンをドラッグして順序を変更
               </Tooltips.Comps.Body>
             } );
           } }
         >
           <FAI.QuestionCircle />
-        </Buttons.Button.Plain>,
+        </Buttons.Button.Clear.R>,
         padding: [ 0,1 ],
         unitWidth: 4
       },

package/src/global/LaunchReactApplication.tsx

@@ -14,6 +14,7 @@ export const LaunchSubApplication = ( props: amotify.global.LaunchReactApplicati
     appearances
   } = props;
   let base = $( baseElement );
+
   if ( !base[ 0 ] || !reactElement ) return;
   if ( appearances ) {
     let {

package/src/preload.tsx

@@ -41,7 +41,8 @@ let tags: Jsmin.CreateElement.Args[] = [
     parent: document.head,
     id: 'ThemeColorMetaTag',
     attr: { name: 'theme-color',content: '#45515c' },
-  },{
+  },
+  {
     parent: document.body,
     tag: 'amotify-app',
     id: launchID,
@@ -56,4 +57,44 @@ let tags: Jsmin.CreateElement.Args[] = [
 for ( let tag of tags ) {
   if ( tag.id && $( '#' + tag.id )[ 0 ] ) continue;
   $.createElement( tag );
-}
+}
+
+// ( () => {
+//   let amotifyRoot = document.createElement( 'amotify-app' );
+//   amotifyRoot.id = launchID;
+//   let shadow = amotifyRoot.attachShadow( { mode: 'open' } );
+
+//   let link = document.createElement( 'link' );
+//   link.href = 'https://public.comun.jp/@env/amotify/v3.1.7/amotify.min.css';
+//   link.rel = 'stylesheet';
+
+//   let sheetDIV = document.createElement( 'div' );
+//   sheetDIV.className = 'AMOTIFY_be AMOTIFY_be_sheet';
+
+//   let snackbar = document.createElement( 'div' );
+//   snackbar.className = 'AMOTIFY_be AMOTIFY_be_snackbar';
+//   snackbar.innerHTML = 'HELLO';
+
+//   let loader = document.createElement( 'div' );
+//   loader.className = 'AMOTIFY_be AMOTIFY_be_loader';
+
+//   let root = document.createElement( 'div' );
+//   root.className = 'AMOTIFY_be AMOTIFY_be_root';
+
+//   shadow.appendChild( link );
+//   shadow.appendChild( sheetDIV );
+//   shadow.appendChild( snackbar );
+//   shadow.appendChild( loader );
+//   shadow.appendChild( root );
+
+//   document.body.appendChild( amotifyRoot );
+
+//   // amotifyRoot.shadowRoot.get
+
+//   setTimeout( () => {
+//     let a = amotifyRoot.shadowRoot!.querySelectorAll( '.AMOTIFY_be_snackbar' );
+
+//     a[ 0 ].innerHTML = 'AAAA';
+//     console.log( '======' );
+//   },1000 );
+// } )();