amotify 0.0.25 → 0.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/@types/amot.tsx +2 -1
  2. package/dist/amotify.js +2 -2
  3. package/dist/amotify.min.css +2 -2
  4. package/dist/coreVender.js +2 -2
  5. package/package.json +4 -3
  6. package/src/atoms/FAI/parts.tsx +54 -51
  7. package/src/functions/Cropper/parts.tsx +4 -4
  8. package/src/functions/Input/Chips/Selector.tsx +1 -3
  9. package/src/functions/Input/File/_.tsx +7 -5
  10. package/src/functions/Input/_.tsx +14 -6
  11. package/src/functions/Input/style.module.scss +3 -3
  12. package/src/functions/Table/Data/parts.tsx +6 -6
  13. package/src/functions/Table/Drag/parts.tsx +8 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "amotify",
3
- "version": "0.0.25",
3
+ "version": "0.0.26",
4
4
  "description": "UI Component for React",
5
5
  "main": "dist/launch.js",
6
6
  "types": "dist/@types.d.ts",
@@ -28,10 +28,11 @@
28
28
  },
29
29
  "homepage": "https://github.com/IkkoKoyama/amotify#readme",
30
30
  "dependencies": {
31
+ "@fortawesome/fontawesome-common-types": "^6.5.1",
31
32
  "@fortawesome/fontawesome-svg-core": "^6.4.2",
32
33
  "@fortawesome/free-brands-svg-icons": "^6.4.2",
33
- "@fortawesome/pro-regular-svg-icons": "^6.4.2",
34
- "@fortawesome/pro-solid-svg-icons": "^6.4.2",
34
+ "@fortawesome/free-regular-svg-icons": "^6.5.1",
35
+ "@fortawesome/free-solid-svg-icons": "^6.5.1",
35
36
  "@fortawesome/react-fontawesome": "^0.2.0",
36
37
  "jsmin-front": "^0.0.17",
37
38
  "react": "^18.2.0",
package/src/atoms/FAI/parts.tsx CHANGED
@@ -3,57 +3,60 @@ import {
3
3
  Box
4
4
  } from '../Various/parts';
5
5
 
6
- import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
6
+ import {
7
+ FontAwesomeIcon
8
+ } from '@fortawesome/react-fontawesome';
9
+ import * as FontawesomeCore from '@fortawesome/fontawesome-svg-core';
7
10
 
8
- import { faUser } from '@fortawesome/pro-regular-svg-icons/faUser';
9
- import { faTimes } from '@fortawesome/pro-regular-svg-icons/faTimes';
10
- import { faAngleRight } from '@fortawesome/pro-regular-svg-icons/faAngleRight';
11
- import { faAngleLeft } from '@fortawesome/pro-regular-svg-icons/faAngleLeft';
12
- import { faAngleUp } from '@fortawesome/pro-regular-svg-icons/faAngleUp';
13
- import { faAngleDown } from '@fortawesome/pro-regular-svg-icons/faAngleDown';
14
- import { faChevronLeft } from '@fortawesome/pro-regular-svg-icons/faChevronLeft';
15
- import { faChevronRight } from '@fortawesome/pro-regular-svg-icons/faChevronRight';
16
- import { faChevronUp } from '@fortawesome/pro-regular-svg-icons/faChevronUp';
17
- import { faChevronDown } from '@fortawesome/pro-regular-svg-icons/faChevronDown';
18
- import { faCaretLeft } from '@fortawesome/pro-regular-svg-icons/faCaretLeft';
19
- import { faCaretRight } from '@fortawesome/pro-regular-svg-icons/faCaretRight';
20
- import { faCaretUp } from '@fortawesome/pro-regular-svg-icons/faCaretUp';
21
- import { faCaretDown } from '@fortawesome/pro-regular-svg-icons/faCaretDown';
22
- import { faArrowLeft } from '@fortawesome/pro-regular-svg-icons/faArrowLeft';
23
- import { faArrowRight } from '@fortawesome/pro-regular-svg-icons/faArrowRight';
24
- import { faArrowUp } from '@fortawesome/pro-regular-svg-icons/faArrowUp';
25
- import { faArrowDown } from '@fortawesome/pro-regular-svg-icons/faArrowDown';
26
- import { faRotate } from '@fortawesome/pro-regular-svg-icons/faRotate';
27
- import { faRedo } from '@fortawesome/pro-regular-svg-icons/faRedo';
28
- import { faCheck } from '@fortawesome/pro-regular-svg-icons/faCheck';
29
- import { faCheckCircle } from '@fortawesome/pro-regular-svg-icons/faCheckCircle';
30
- import { faQuestion } from '@fortawesome/pro-regular-svg-icons/faQuestion';
31
- import { faQuestionCircle } from '@fortawesome/pro-regular-svg-icons/faQuestionCircle';
32
- import { faExclamation } from '@fortawesome/pro-regular-svg-icons/faExclamation';
33
- import { faExclamationTriangle } from '@fortawesome/pro-regular-svg-icons/faExclamationTriangle';
34
- import { faHome } from '@fortawesome/pro-regular-svg-icons/faHome';
35
- import { faShare } from '@fortawesome/pro-regular-svg-icons/faShare';
36
- import { faSearch } from '@fortawesome/pro-regular-svg-icons/faSearch';
37
- import { faYenSign } from '@fortawesome/pro-regular-svg-icons/faYenSign';
38
- import { faHeart } from '@fortawesome/pro-regular-svg-icons/faHeart';
39
- import { faStar } from '@fortawesome/pro-regular-svg-icons/faStar';
40
- import { faEdit } from '@fortawesome/pro-regular-svg-icons/faEdit';
41
- import { faPen } from '@fortawesome/pro-regular-svg-icons/faPen';
42
- import { faCopy } from '@fortawesome/pro-regular-svg-icons/faCopy';
43
- import { faFile } from '@fortawesome/pro-regular-svg-icons/faFile';
44
- import { faTrashAlt } from '@fortawesome/pro-regular-svg-icons/faTrashAlt';
45
- import { faBars } from '@fortawesome/pro-regular-svg-icons/faBars';
46
- import { faDownload } from '@fortawesome/pro-regular-svg-icons/faDownload';
47
- import { faLink } from '@fortawesome/pro-regular-svg-icons/faLink';
48
- import { faLinkSlash } from '@fortawesome/pro-regular-svg-icons/faLinkSlash';
49
- import { faExternalLinkAlt } from '@fortawesome/pro-regular-svg-icons/faExternalLinkAlt';
50
- import { faGear } from '@fortawesome/pro-regular-svg-icons/faGear';
51
- import { faPlus } from '@fortawesome/pro-regular-svg-icons/faPlus';
52
- import { faMinus } from '@fortawesome/pro-regular-svg-icons/faMinus';
53
- import { faEllipsisH } from '@fortawesome/pro-regular-svg-icons/faEllipsisH';
54
- import { faEllipsisV } from '@fortawesome/pro-regular-svg-icons/faEllipsisV';
55
- import { faPaperPlane } from '@fortawesome/pro-regular-svg-icons/faPaperPlane';
56
- import { faImage } from '@fortawesome/pro-regular-svg-icons/faImage';
11
+ import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
12
+ import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
13
+ import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
14
+ import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
15
+ import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp';
16
+ import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
17
+ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
18
+ import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
19
+ import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
20
+ import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
21
+ import { faCaretLeft } from '@fortawesome/free-solid-svg-icons/faCaretLeft';
22
+ import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
23
+ import { faCaretUp } from '@fortawesome/free-solid-svg-icons/faCaretUp';
24
+ import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown';
25
+ import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
26
+ import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
27
+ import { faArrowUp } from '@fortawesome/free-solid-svg-icons/faArrowUp';
28
+ import { faArrowDown } from '@fortawesome/free-solid-svg-icons/faArrowDown';
29
+ import { faRotate } from '@fortawesome/free-solid-svg-icons/faRotate';
30
+ import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
31
+ import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
32
+ import { faCheckCircle } from '@fortawesome/free-solid-svg-icons/faCheckCircle';
33
+ import { faQuestion } from '@fortawesome/free-solid-svg-icons/faQuestion';
34
+ import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons/faQuestionCircle';
35
+ import { faExclamation } from '@fortawesome/free-solid-svg-icons/faExclamation';
36
+ import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
37
+ import { faHome } from '@fortawesome/free-solid-svg-icons/faHome';
38
+ import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
39
+ import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
40
+ import { faYenSign } from '@fortawesome/free-solid-svg-icons/faYenSign';
41
+ import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart';
42
+ import { faStar } from '@fortawesome/free-solid-svg-icons/faStar';
43
+ import { faEdit } from '@fortawesome/free-solid-svg-icons/faEdit';
44
+ import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
45
+ import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
46
+ import { faFile } from '@fortawesome/free-solid-svg-icons/faFile';
47
+ import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
48
+ import { faBars } from '@fortawesome/free-solid-svg-icons/faBars';
49
+ import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
50
+ import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
51
+ import { faLinkSlash } from '@fortawesome/free-solid-svg-icons/faLinkSlash';
52
+ import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
53
+ import { faGear } from '@fortawesome/free-solid-svg-icons/faGear';
54
+ import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
55
+ import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus';
56
+ import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
57
+ import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
58
+ import { faPaperPlane } from '@fortawesome/free-solid-svg-icons/faPaperPlane';
59
+ import { faImage } from '@fortawesome/free-solid-svg-icons/faImage';
57
60
 
58
61
  const FAIComps: React.FC<amotify.atoms.FAI.FAIParams> = ( params ) => {
59
62
  let {
@@ -72,7 +75,7 @@ const FAIComps: React.FC<amotify.atoms.FAI.FAIParams> = ( params ) => {
72
75
  >
73
76
  <Box freeCSS={ { aspectRatio: 1 } }>
74
77
  <FontAwesomeIcon
75
- icon={ icon }
78
+ icon={ icon as any }
76
79
  fixedWidth
77
80
  size='sm'
78
81
  { ...iconParams }
package/src/functions/Cropper/parts.tsx CHANGED
@@ -20,10 +20,10 @@ import {
20
20
  Loader
21
21
  } from '@fn';
22
22
 
23
- import { faPalette } from '@fortawesome/pro-solid-svg-icons/faPalette';
24
- import { faBarsStaggered } from '@fortawesome/pro-solid-svg-icons/faBarsStaggered';
25
- import { faRotateLeft } from '@fortawesome/pro-solid-svg-icons/faRotateLeft';
26
- import { faRotateRight } from '@fortawesome/pro-solid-svg-icons/faRotateRight';
23
+ import { faPalette } from '@fortawesome/free-solid-svg-icons/faPalette';
24
+ import { faBarsStaggered } from '@fortawesome/free-solid-svg-icons/faBarsStaggered';
25
+ import { faRotateLeft } from '@fortawesome/free-solid-svg-icons/faRotateLeft';
26
+ import { faRotateRight } from '@fortawesome/free-solid-svg-icons/faRotateRight';
27
27
 
28
28
  import style from './style.module.scss';
29
29
 
package/src/functions/Input/Chips/Selector.tsx CHANGED
@@ -19,8 +19,6 @@ import {
19
19
  Sheet
20
20
  } from '@fn';
21
21
 
22
- import { faWindowMinimize } from '@fortawesome/pro-solid-svg-icons/faWindowMinimize';
23
-
24
22
  import style from './style.module.scss';
25
23
 
26
24
  const Selector = ( params: {
@@ -314,7 +312,7 @@ const Selector = ( params: {
314
312
  Sheet.close( params.selectorID! );
315
313
  } }
316
314
  >
317
- <FAI icon={ faWindowMinimize } />
315
+ <FAI.Times />
318
316
  </Buttons.Button.Border.S>
319
317
  </Row.Separate>
320
318
  <Row.Separate>
package/src/functions/Input/File/_.tsx CHANGED
@@ -26,7 +26,7 @@ import {
26
26
  } from '../core';
27
27
  import style from './style.module.scss';
28
28
 
29
- import { faCloudArrowUp } from '@fortawesome/pro-solid-svg-icons/faCloudArrowUp';
29
+ import { faCloudArrowUp } from '@fortawesome/free-solid-svg-icons/faCloudArrowUp';
30
30
 
31
31
  function DefaultValidation( props: {
32
32
  value: any
@@ -230,7 +230,7 @@ const FileList: React.FC<{
230
230
 
231
231
  if ( Left > 0 ) {
232
232
  Files.push(
233
- <Buttons.Label.Plain
233
+ <label
234
234
  key={ 'AddButton' }
235
235
  className={ [ params.cellClassName,style.AddButton ].join( ' ' ) }
236
236
  htmlFor={ params.id }
@@ -268,13 +268,15 @@ const FileList: React.FC<{
268
268
  isBoldFont
269
269
  />
270
270
  <Box
271
- children={ 'または、ファイルをドロップ' }
271
+ isBoldFont
272
272
  fontColor={ '4.thin' }
273
273
  fontSize={ '0.xs' }
274
- />
274
+ >
275
+ ファイルをドロップ
276
+ </Box>
275
277
  </Box>
276
278
  </Row.Center>
277
- </Buttons.Label.Plain>
279
+ </label>
278
280
  )
279
281
  }
280
282
 
package/src/functions/Input/_.tsx CHANGED
@@ -19,10 +19,12 @@ import {
19
19
  Tooltips
20
20
  } from '@fn';
21
21
 
22
- import { faEye } from '@fortawesome/pro-solid-svg-icons/faEye';
23
- import { faClock } from '@fortawesome/pro-regular-svg-icons/faClock';
24
- import { faCalendarLines } from '@fortawesome/pro-regular-svg-icons/faCalendarLines';
25
- import { faAnglesUpDown } from '@fortawesome/pro-solid-svg-icons/faAnglesUpDown';
22
+ // as FontawesomeCore.IconProp
23
+ import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
24
+ import { faClock } from '@fortawesome/free-regular-svg-icons/faClock';
25
+ import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons/faCalendarAlt';
26
+ import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp';
27
+ import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
26
28
 
27
29
  import style from './style.module.scss';
28
30
 
@@ -187,7 +189,7 @@ const TimeInputs: amotify.fn.Input.Time.Methods & {
187
189
  if ( $.is.nullish( rawParams.rightIndicator ) ) {
188
190
  let icon = ( rawParams.restrict || '' ).match( /clock/ )
189
191
  ? faClock
190
- : faCalendarLines;
192
+ : faCalendarAlt;
191
193
 
192
194
  rawParams.rightIndicator = <Input.Comps.RightIndicator
193
195
  padding={ 0 }
@@ -464,7 +466,12 @@ export const Input: amotify.fn.Input.Methods = {
464
466
  } }
465
467
  paddingLeft={ 3 }
466
468
  rightIcon={ <Input.Comps.LeftIcon>
467
- <FAI icon={ faAnglesUpDown } />
469
+ <Column
470
+ gap={ 0 }
471
+ >
472
+ <FAI icon={ faAngleUp } />
473
+ <FAI icon={ faAngleDown } freeCSS={ { marginTop: -6 } } />
474
+ </Column>
468
475
  </Input.Comps.LeftIcon> }
469
476
  limit={ 1 }
470
477
  { ...params }
@@ -641,6 +648,7 @@ const DefaultStyles = {
641
648
  Styles = {
642
649
  ...Styles,
643
650
  borderRadius: 0,
651
+ border: 'unset',
644
652
  borderBottom: true,
645
653
  backgroundColor: 'cloud'
646
654
  }
package/src/functions/Input/style.module.scss CHANGED
@@ -57,10 +57,10 @@
57
57
  }
58
58
  &:focus {
59
59
  border-color: $color-theme !important;
60
- box-shadow: 0 0 0 $unit1_3 $color-theme-opacity-low;
60
+ box-shadow: 0 0 0 transparent inset, 0 0 0 $unit1_3 $color-theme-opacity-low;
61
61
  }
62
62
  &:active {
63
- box-shadow: none;
63
+ box-shadow: 0 0 0 transparent inset, 0 0 0 transparent;
64
64
  transition: $animation-time-long;
65
65
  }
66
66
  &.InputCover {
@@ -70,7 +70,7 @@
70
70
  }
71
71
  &:focus-within {
72
72
  border-color: $color-theme !important;
73
- box-shadow: 0 0 0 $unit1_3 $color-theme-opacity-low;
73
+ box-shadow: 0 0 0 transparent inset, 0 0 0 $unit1_3 $color-theme-opacity-low;
74
74
  }
75
75
  }
76
76
  }
package/src/functions/Table/Data/parts.tsx CHANGED
@@ -18,10 +18,10 @@ import {
18
18
  Sheet,
19
19
  } from '@fn';
20
20
 
21
- import { faArrowUp } from '@fortawesome/pro-solid-svg-icons/faArrowUp';
22
- import { faArrowDown } from '@fortawesome/pro-solid-svg-icons/faArrowDown';
23
- import { faArrowUpArrowDown } from '@fortawesome/pro-solid-svg-icons/faArrowUpArrowDown';
24
- import { faBarsFilter } from '@fortawesome/pro-solid-svg-icons/faBarsFilter';
21
+ import { faArrowUp } from '@fortawesome/free-solid-svg-icons/faArrowUp';
22
+ import { faArrowDown } from '@fortawesome/free-solid-svg-icons/faArrowDown';
23
+ import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight';
24
+ import { faFilter } from '@fortawesome/free-solid-svg-icons/faFilter';
25
25
 
26
26
  import style from '../style.module.scss';
27
27
 
@@ -156,7 +156,7 @@ const Components = {
156
156
  ? orderDirection == 'DESC'
157
157
  ? faArrowDown
158
158
  : faArrowUp
159
- : faArrowUpArrowDown }
159
+ : faArrowRight }
160
160
  /> : null;
161
161
 
162
162
  let FilterButton = <></>;
@@ -280,7 +280,7 @@ const Components = {
280
280
  Sheet.open( SheetParams );
281
281
  } }
282
282
  >
283
- <FAI icon={ faBarsFilter } />
283
+ <FAI icon={ faFilter } />
284
284
  </Buttons.Button.Sub.S>
285
285
  </Box>
286
286
  }
package/src/functions/Table/Drag/parts.tsx CHANGED
@@ -15,7 +15,7 @@ import {
15
15
  DefaultCellSystemStyles
16
16
  } from '../_';
17
17
 
18
- import { faGripDotsVertical } from '@fortawesome/pro-solid-svg-icons/faGripDotsVertical';
18
+ import { faGripVertical } from '@fortawesome/free-solid-svg-icons/faGripVertical';
19
19
 
20
20
  import style from '../style.module.scss';
21
21
 
@@ -94,6 +94,8 @@ const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
94
94
  {
95
95
  Cols.push( <Comps.TH
96
96
  key={ 'DragOrigin' }
97
+ padding={ 0 }
98
+ borderRight
97
99
  { ...cellStyles }
98
100
  { ...DefaultCellSystemStyles( {
99
101
  top: rowIndex == 0 && !head,
@@ -111,8 +113,6 @@ const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
111
113
  isBody: true,
112
114
  isHeader: false,
113
115
  } ) : {} }
114
- padding={ 0 }
115
- borderRight
116
116
  className={ [
117
117
  style.Cell,
118
118
  style.Draggable,
@@ -121,7 +121,7 @@ const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
121
121
  >
122
122
  <Buttons.Button.Clear.R
123
123
  className={ style.DragableButton }
124
- fontColor={ '5.translucent' }
124
+ fontColor={ '4.thin' }
125
125
  fontSize={ '3.paragraph' }
126
126
  margin={ 'auto' }
127
127
  tabIndex={ -1 }
@@ -143,7 +143,7 @@ const BodyRows: React.FC<amotify.fn.Tables.Drag.Params> = ( props ) => {
143
143
  } );
144
144
  } }
145
145
  >
146
- <FAI icon={ faGripDotsVertical } />
146
+ <FAI icon={ faGripVertical } />
147
147
  </Buttons.Button.Clear.R>
148
148
  </Comps.TH> );
149
149
  }
@@ -306,23 +306,22 @@ export const DragTable: React.FC<amotify.fn.Tables.Drag.Params> = ( params ) =>
306
306
  if ( params.head ) {
307
307
  params.head = [
308
308
  {
309
- children: <Buttons.Button.Plain
309
+ children: <Buttons.Button.Clear.R
310
310
  ssSphere={ 3 }
311
311
  fontSize={ '3.paragraph' }
312
312
  fontColor={ 'theme' }
313
313
  onMouseOver={ ( event ) => {
314
314
  Tooltips.open( {
315
315
  parent: event.currentTarget,
316
- padding: [ 0,1 ],
317
316
  content: <Tooltips.Comps.Body>
318
- <FAI icon={ faGripDotsVertical } />
317
+ <FAI icon={ faGripVertical } />
319
318
  ボタンをドラッグして順序を変更
320
319
  </Tooltips.Comps.Body>
321
320
  } );
322
321
  } }
323
322
  >
324
323
  <FAI.QuestionCircle />
325
- </Buttons.Button.Plain>,
324
+ </Buttons.Button.Clear.R>,
326
325
  padding: [ 0,1 ],
327
326
  unitWidth: 4
328
327
  },