amotify 0.2.132 → 0.2.133
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.
- package/demo/esbuild/app.tsx +2 -123
- package/demo/esbuild/designBook.tsx +249 -449
- package/demo/esbuild/public/index.js +90 -94
- package/dist/@utils/config.js +1 -1
- package/dist/fn/Input/Slider.js +1 -1
- package/package.json +1 -1
|
@@ -44,72 +44,14 @@ import {
|
|
|
44
44
|
Effect,
|
|
45
45
|
Cropper,
|
|
46
46
|
RootViewController,
|
|
47
|
-
StyleTags
|
|
47
|
+
StyleTags,
|
|
48
|
+
Roundness,
|
|
49
|
+
Card
|
|
48
50
|
} from 'amotify'
|
|
49
51
|
|
|
50
52
|
const Basic = {
|
|
51
53
|
index: () => {
|
|
52
54
|
return <>
|
|
53
|
-
<Flex gap={ 1 }>
|
|
54
|
-
<Box flexCenter>
|
|
55
|
-
<Placeholder
|
|
56
|
-
ssSphere={ 6 }
|
|
57
|
-
children={ 'Placeholder' }
|
|
58
|
-
/>
|
|
59
|
-
</Box>
|
|
60
|
-
<Grid
|
|
61
|
-
gridCols={ 3 }
|
|
62
|
-
gap={ 1 }
|
|
63
|
-
flexSizing={ 'auto' }
|
|
64
|
-
padding={ 1 }
|
|
65
|
-
border
|
|
66
|
-
>
|
|
67
|
-
<Box padding={ 2 } backgroundColor='layer.0' />
|
|
68
|
-
<Box padding={ 2 } backgroundColor='layer.1' />
|
|
69
|
-
<Box padding={ 2 } backgroundColor='layer.2' />
|
|
70
|
-
<Box padding={ 2 } backgroundColor='layer.3' />
|
|
71
|
-
<Box padding={ 2 } backgroundColor='layer.4' />
|
|
72
|
-
<Box padding={ 2 } backgroundColor='layer.5' />
|
|
73
|
-
<Box padding={ 2 } backgroundColor='layer.6' />
|
|
74
|
-
</Grid>
|
|
75
|
-
<Grid
|
|
76
|
-
gridCols={ 3 }
|
|
77
|
-
gap={ 1 }
|
|
78
|
-
flexSizing={ 'auto' }
|
|
79
|
-
padding={ 1 }
|
|
80
|
-
backgroundColor='dark'
|
|
81
|
-
>
|
|
82
|
-
<Box padding={ 2 } backgroundColor='layer.0' />
|
|
83
|
-
<Box padding={ 2 } backgroundColor='layer.1' />
|
|
84
|
-
<Box padding={ 2 } backgroundColor='layer.2' />
|
|
85
|
-
<Box padding={ 2 } backgroundColor='layer.3' />
|
|
86
|
-
<Box padding={ 2 } backgroundColor='layer.4' />
|
|
87
|
-
<Box padding={ 2 } backgroundColor='layer.5' />
|
|
88
|
-
<Box padding={ 2 } backgroundColor='layer.6' />
|
|
89
|
-
</Grid>
|
|
90
|
-
<Grid
|
|
91
|
-
gridCols={ 3 }
|
|
92
|
-
gap={ '1/2' }
|
|
93
|
-
ssCardBox
|
|
94
|
-
flexSizing={ 'auto' }
|
|
95
|
-
>
|
|
96
|
-
<Box flexCenter fontColor='1.clear'>
|
|
97
|
-
FontColor1
|
|
98
|
-
</Box>
|
|
99
|
-
<Box flexCenter fontColor='2.normal'>
|
|
100
|
-
FontColor2
|
|
101
|
-
</Box>
|
|
102
|
-
<Box flexCenter fontColor='3.blur'>
|
|
103
|
-
FontColor3
|
|
104
|
-
</Box>
|
|
105
|
-
<Box flexCenter fontColor='4.thin'>
|
|
106
|
-
FontColor4
|
|
107
|
-
</Box>
|
|
108
|
-
<Box flexCenter fontColor='5.translucent'>
|
|
109
|
-
FontColor5
|
|
110
|
-
</Box>
|
|
111
|
-
</Grid>
|
|
112
|
-
</Flex>
|
|
113
55
|
<Basic.Fonts />
|
|
114
56
|
<Basic.Box />
|
|
115
57
|
<Basic.Flex />
|
|
@@ -118,75 +60,91 @@ const Basic = {
|
|
|
118
60
|
</>
|
|
119
61
|
},
|
|
120
62
|
Fonts: () => {
|
|
121
|
-
return <
|
|
122
|
-
<
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
>
|
|
134
|
-
|
|
135
|
-
</Box
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
63
|
+
return <Card padding={ 1 }>
|
|
64
|
+
<Column>
|
|
65
|
+
<Text.SubTitle>Fonts</Text.SubTitle>
|
|
66
|
+
<Box overflow={ 'auto' }>
|
|
67
|
+
<Column>
|
|
68
|
+
<Row.Left
|
|
69
|
+
ssCardBox
|
|
70
|
+
padding={ 1.5 }
|
|
71
|
+
>
|
|
72
|
+
[GrayColor]
|
|
73
|
+
<Box fontColor='1.clear'>1.clear</Box>
|
|
74
|
+
<Box fontColor='2.normal'>2.normal</Box>
|
|
75
|
+
<Box fontColor='3.blur'>3.blur</Box>
|
|
76
|
+
<Box fontColor='4.thin'>4.thin</Box>
|
|
77
|
+
<Box fontColor='5.translucent'>5.translucent</Box>
|
|
78
|
+
<Box fontColor='6.clear'>6.clear</Box>
|
|
79
|
+
</Row.Left>
|
|
80
|
+
<Row.Left
|
|
81
|
+
ssCardBox='plain'
|
|
82
|
+
padding={ 1.5 }
|
|
83
|
+
backgroundColor='dark'
|
|
84
|
+
>
|
|
85
|
+
<Box fontColor='white'>[GrayColor in Dark]</Box>
|
|
86
|
+
<Box fontColor='1.clear'>1.clear</Box>
|
|
87
|
+
<Box fontColor='2.normal'>2.normal</Box>
|
|
88
|
+
<Box fontColor='3.blur'>3.blur</Box>
|
|
89
|
+
<Box fontColor='4.thin'>4.thin</Box>
|
|
90
|
+
<Box fontColor='5.translucent'>5.translucent</Box>
|
|
91
|
+
<Box fontColor='6.clear'>6.clear</Box>
|
|
92
|
+
</Row.Left>
|
|
93
|
+
<Column ssCardBox padding={ 1.5 }>
|
|
94
|
+
<Box>[size:Landing]</Box>
|
|
142
95
|
<Box isSemiBoldFont fontSize='7.landing'>
|
|
143
96
|
Visualize Your <Span fontColor='theme'>
|
|
144
97
|
Colors
|
|
145
98
|
</Span> On a Real Website
|
|
146
99
|
</Box>
|
|
147
|
-
|
|
148
|
-
|
|
100
|
+
</Column>
|
|
101
|
+
<Column ssCardBox padding={ 1.5 }>
|
|
102
|
+
<Box>[size:Title]</Box>
|
|
149
103
|
<Box fontSize='6.title'>
|
|
150
104
|
令和４年度の国民負担率を公表します
|
|
151
105
|
</Box>
|
|
152
|
-
|
|
153
|
-
|
|
106
|
+
</Column>
|
|
107
|
+
<Column ssCardBox padding={ 1.5 }>
|
|
108
|
+
<Box>[size:Subtitle]</Box>
|
|
154
109
|
<Box fontSize='5.subTitle'>
|
|
155
110
|
支払いを受け付ける
|
|
156
111
|
</Box>
|
|
157
|
-
|
|
158
|
-
|
|
112
|
+
</Column>
|
|
113
|
+
<Column ssCardBox padding={ 1.5 }>
|
|
114
|
+
<Box>[size:Thirdtitle]</Box>
|
|
159
115
|
<Box fontSize='4.thirdTitle'>
|
|
160
116
|
租税負担率と社会保障負担率を合計した国民負担率について、令和４年度の見通しを推計しましたので、公表します。
|
|
161
117
|
</Box>
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
<
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
This article discusses performance best practices for fonts.
|
|
118
|
+
</Column>
|
|
119
|
+
<Column ssCardBox padding={ 1.5 }>
|
|
120
|
+
<Box>[size:Paragraph]</Box>
|
|
121
|
+
<Text.Paragraph>
|
|
122
|
+
<Text.Description>
|
|
123
|
+
{ `This article discusses performance best practices for fonts.
|
|
168
124
|
There are a variety of ways in which web fonts impact performance`}
|
|
169
|
-
|
|
170
|
-
</Text.
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
<Box
|
|
125
|
+
</Text.Description>
|
|
126
|
+
</Text.Paragraph>
|
|
127
|
+
</Column>
|
|
128
|
+
<Column ssCardBox padding={ 1.5 }>
|
|
129
|
+
<Box>[size:Normal]</Box>
|
|
130
|
+
<Text>
|
|
174
131
|
効率的で持続可能な財政への転換を図り、この財政構造を各般の構造改革とともに推進することで、民間需要主導の持続的経済成長の実現を目指します。
|
|
175
132
|
少子・高齢化、国際化など経済社会の構造変化に対応できる21世紀のあるべき税制をきずきます。
|
|
176
133
|
財政投融資は、行財政改革の趣旨を踏まえ、民間ではできない分野・事業などに重点化を行い、真に政策的に必要な資金需要には的確に対応します。
|
|
177
134
|
金融庁と協力し、金融のセーフティネットを整備し、金融危機に素早く対応するなど、金融システムの安定の確保を目指します。
|
|
178
135
|
国際的な協力等に積極的に取り組むことにより、国際通貨システムの安定・国際貿易の秩序ある発展を目指します。
|
|
179
|
-
</
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
<Box
|
|
136
|
+
</Text>
|
|
137
|
+
</Column>
|
|
138
|
+
<Column ssCardBox padding={ 1.5 }>
|
|
139
|
+
<Box>[size:Mini]</Box>
|
|
140
|
+
<Text.Supplement>
|
|
183
141
|
Copyright © Ministry of Finance Japan. All Rights Reserved.
|
|
184
|
-
</
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
</
|
|
189
|
-
</
|
|
142
|
+
</Text.Supplement>
|
|
143
|
+
</Column>
|
|
144
|
+
</Column>
|
|
145
|
+
</Box>
|
|
146
|
+
</Column>
|
|
147
|
+
</Card>
|
|
190
148
|
},
|
|
191
149
|
Box: () => {
|
|
192
150
|
return <Box ssCardBox>
|
|
@@ -275,6 +233,7 @@ children={ 'styleBox' }
|
|
|
275
233
|
<Box children={ 'FlexBox1' } />
|
|
276
234
|
<Box children={ 'FlexBox2' } />
|
|
277
235
|
<Box children={ 'FlexBox3' } />
|
|
236
|
+
<Box flexSizing={ 'auto' } children={ 'FlexBox3' } />
|
|
278
237
|
</Flex>`
|
|
279
238
|
}
|
|
280
239
|
</Text.Description>
|
|
@@ -284,25 +243,10 @@ children={ 'styleBox' }
|
|
|
284
243
|
flexType='row'
|
|
285
244
|
fontColor='theme'
|
|
286
245
|
>
|
|
287
|
-
<
|
|
288
|
-
|
|
289
|
-
</
|
|
290
|
-
<
|
|
291
|
-
padding={ 1 }
|
|
292
|
-
borderRadius={ 1 }
|
|
293
|
-
flexCenter
|
|
294
|
-
backgroundColor={ 'theme.opa.middle' }
|
|
295
|
-
>
|
|
296
|
-
FlexBox2
|
|
297
|
-
</Box>
|
|
298
|
-
<Box
|
|
299
|
-
padding={ 1 }
|
|
300
|
-
borderRadius={ 1 }
|
|
301
|
-
flexCenter
|
|
302
|
-
backgroundColor='theme.opa.high'
|
|
303
|
-
>
|
|
304
|
-
FlexBox3
|
|
305
|
-
</Box>
|
|
246
|
+
<Card.Plain flexCenter padding={ 1 } backgroundColor='theme.opa.low'>FlexBox1</Card.Plain>
|
|
247
|
+
<Card.Plain flexCenter padding={ 1 } backgroundColor={ 'theme.opa.middle' }>FlexBox2</Card.Plain>
|
|
248
|
+
<Card.Plain flexCenter padding={ 1 } backgroundColor='theme.opa.high'>FlexBox3</Card.Plain>
|
|
249
|
+
<Card.Plain flexCenter flexSizing={ 'auto' } padding={ 1 } backgroundColor='theme.opa.high'>FlexBox4</Card.Plain>
|
|
306
250
|
</Flex>
|
|
307
251
|
},
|
|
308
252
|
],[
|
|
@@ -351,9 +295,9 @@ flexChilds={ 'auto' }
|
|
|
351
295
|
</Text.Description>
|
|
352
296
|
},{
|
|
353
297
|
children: <Flex gap={ 1 } fontColor='white'>
|
|
354
|
-
<
|
|
355
|
-
<
|
|
356
|
-
<
|
|
298
|
+
<Card.Plain flexCenter padding={ 1 } backgroundColor='posi' flexGrid={ 2 }>Box1</Card.Plain>
|
|
299
|
+
<Card.Plain flexCenter padding={ 1 } backgroundColor='nega' flexGrid={ 3 }>Box2</Card.Plain>
|
|
300
|
+
<Card.Plain flexCenter padding={ 1 } backgroundColor='warn' flexGrid={ 4 }>Box3</Card.Plain>
|
|
357
301
|
</Flex>
|
|
358
302
|
},
|
|
359
303
|
]
|
|
@@ -393,12 +337,12 @@ flexChilds={ 'auto' }
|
|
|
393
337
|
</Text.Description>
|
|
394
338
|
},{
|
|
395
339
|
children: <Grid gridCols={ 3 } gap={ 1 }>
|
|
396
|
-
<
|
|
397
|
-
<
|
|
398
|
-
<
|
|
399
|
-
<
|
|
400
|
-
<
|
|
401
|
-
<
|
|
340
|
+
<Card.Plain padding={ 1 } backgroundColor='layer.1'>GridBox1</Card.Plain>
|
|
341
|
+
<Card.Plain padding={ 1 } backgroundColor='layer.2'>GridBox2</Card.Plain>
|
|
342
|
+
<Card.Plain padding={ 1 } backgroundColor='layer.3'>GridBox3</Card.Plain>
|
|
343
|
+
<Card.Plain padding={ 1 } backgroundColor='layer.4'>GridBox4</Card.Plain>
|
|
344
|
+
<Card.Plain padding={ 1 } backgroundColor='layer.5'>GridBox5</Card.Plain>
|
|
345
|
+
<Card.Plain padding={ 1 } backgroundColor='layer.6'>GridBox6</Card.Plain>
|
|
402
346
|
</Grid>
|
|
403
347
|
},
|
|
404
348
|
]
|
|
@@ -445,11 +389,7 @@ children={
|
|
|
445
389
|
</Text.Description>
|
|
446
390
|
</>
|
|
447
391
|
},{
|
|
448
|
-
children:
|
|
449
|
-
<Label
|
|
450
|
-
>
|
|
451
|
-
|
|
452
|
-
</Label>
|
|
392
|
+
children: <Column>
|
|
453
393
|
<Label.Sub
|
|
454
394
|
children={ 'ToggleButton' }
|
|
455
395
|
onClick={ () => {
|
|
@@ -462,7 +402,7 @@ children={
|
|
|
462
402
|
>
|
|
463
403
|
in Accordion Element
|
|
464
404
|
</Accordion>
|
|
465
|
-
|
|
405
|
+
</Column>
|
|
466
406
|
}
|
|
467
407
|
],[
|
|
468
408
|
{
|
|
@@ -514,59 +454,16 @@ alt='noImage'
|
|
|
514
454
|
}
|
|
515
455
|
const Logos = {
|
|
516
456
|
index: () => {
|
|
517
|
-
return
|
|
518
|
-
<Logos.Comun />
|
|
457
|
+
return <Row.Left flexWrap flexChilds='auto'>
|
|
519
458
|
<Logos.Mingoo />
|
|
520
459
|
<Logos.Google />
|
|
521
460
|
<Logos.Facebook />
|
|
522
461
|
<Logos.Line />
|
|
523
462
|
<Logos.Twitter />
|
|
524
|
-
|
|
525
|
-
},
|
|
526
|
-
Comun: () => {
|
|
527
|
-
return <Box ssCardBox>
|
|
528
|
-
<Text.SubTitle borderBottom padding={ 1 }>
|
|
529
|
-
Comun
|
|
530
|
-
</Text.SubTitle>
|
|
531
|
-
<Box
|
|
532
|
-
padding={ 1 }
|
|
533
|
-
overflow={ 'auto' }
|
|
534
|
-
>
|
|
535
|
-
<Column padding={ 2 }>
|
|
536
|
-
<Row.Left gap={ 2 }>
|
|
537
|
-
<Logo.Brands.ComunIcon size='S' />
|
|
538
|
-
<Logo.Brands.ComunIcon size='R' />
|
|
539
|
-
<Logo.Brands.ComunIcon size='L' />
|
|
540
|
-
<Logo.Brands.ComunIcon size='2L' />
|
|
541
|
-
<Logo.Brands.ComunIcon size='3L' />
|
|
542
|
-
</Row.Left>
|
|
543
|
-
<Row.Left gap={ 2 }>
|
|
544
|
-
<Logo.Brands.ComunTitle size='S' />
|
|
545
|
-
<Logo.Brands.ComunTitle size='R' />
|
|
546
|
-
<Logo.Brands.ComunTitle size='L' />
|
|
547
|
-
<Logo.Brands.ComunTitle size='2L' />
|
|
548
|
-
<Logo.Brands.ComunTitle size='3L' />
|
|
549
|
-
</Row.Left>
|
|
550
|
-
<Row.Left gap={ 2 }>
|
|
551
|
-
<Logo.Brands.ComunLogoH size='S' />
|
|
552
|
-
<Logo.Brands.ComunLogoH size='R' />
|
|
553
|
-
<Logo.Brands.ComunLogoH size='L' />
|
|
554
|
-
<Logo.Brands.ComunLogoH size='2L' />
|
|
555
|
-
<Logo.Brands.ComunLogoH size='3L' />
|
|
556
|
-
</Row.Left>
|
|
557
|
-
<Row.Left gap={ 2 }>
|
|
558
|
-
<Logo.Brands.ComunLogoV size='S' />
|
|
559
|
-
<Logo.Brands.ComunLogoV size='R' />
|
|
560
|
-
<Logo.Brands.ComunLogoV size='L' />
|
|
561
|
-
<Logo.Brands.ComunLogoV size='2L' />
|
|
562
|
-
<Logo.Brands.ComunLogoV size='3L' />
|
|
563
|
-
</Row.Left>
|
|
564
|
-
</Column>
|
|
565
|
-
</Box>
|
|
566
|
-
</Box>
|
|
463
|
+
</Row.Left>
|
|
567
464
|
},
|
|
568
465
|
Mingoo: () => {
|
|
569
|
-
return <
|
|
466
|
+
return <Card>
|
|
570
467
|
<Text.SubTitle borderBottom padding={ 1 }>
|
|
571
468
|
Mingoo
|
|
572
469
|
</Text.SubTitle>
|
|
@@ -583,13 +480,11 @@ const Logos = {
|
|
|
583
480
|
<Logo.Brands.MingooIcon size='3L' />
|
|
584
481
|
</Row.Center>
|
|
585
482
|
</Box>
|
|
586
|
-
</
|
|
483
|
+
</Card>
|
|
587
484
|
},
|
|
588
485
|
Google: () => {
|
|
589
|
-
return <
|
|
590
|
-
<Text.SubTitle borderBottom padding={ 1 }>
|
|
591
|
-
Google
|
|
592
|
-
</Text.SubTitle>
|
|
486
|
+
return <Card>
|
|
487
|
+
<Text.SubTitle borderBottom padding={ 1 }>Google</Text.SubTitle>
|
|
593
488
|
<Box padding={ 1 } overflow={ 'auto' }>
|
|
594
489
|
<Row.Center flexType='col' gap={ 2 } padding={ 2 }>
|
|
595
490
|
<Logo.Brands.Google size='S' />
|
|
@@ -599,13 +494,11 @@ const Logos = {
|
|
|
599
494
|
<Logo.Brands.Google size='3L' />
|
|
600
495
|
</Row.Center>
|
|
601
496
|
</Box>
|
|
602
|
-
</
|
|
497
|
+
</Card>
|
|
603
498
|
},
|
|
604
499
|
Facebook: () => {
|
|
605
|
-
return <
|
|
606
|
-
<Text.SubTitle borderBottom padding={ 1 }>
|
|
607
|
-
Facebook
|
|
608
|
-
</Text.SubTitle>
|
|
500
|
+
return <Card>
|
|
501
|
+
<Text.SubTitle borderBottom padding={ 1 }>Facebook</Text.SubTitle>
|
|
609
502
|
<Box padding={ 1 } overflow={ 'auto' }>
|
|
610
503
|
<Row.Center flexType='col' gap={ 2 } padding={ 2 }>
|
|
611
504
|
<Logo.Brands.Facebook size='S' />
|
|
@@ -615,13 +508,11 @@ const Logos = {
|
|
|
615
508
|
<Logo.Brands.Facebook size='3L' />
|
|
616
509
|
</Row.Center>
|
|
617
510
|
</Box>
|
|
618
|
-
</
|
|
511
|
+
</Card>
|
|
619
512
|
},
|
|
620
513
|
Line: () => {
|
|
621
|
-
return <
|
|
622
|
-
<Text.SubTitle borderBottom padding={ 1 }>
|
|
623
|
-
LINE
|
|
624
|
-
</Text.SubTitle>
|
|
514
|
+
return <Card>
|
|
515
|
+
<Text.SubTitle borderBottom padding={ 1 }>LINE</Text.SubTitle>
|
|
625
516
|
<Box padding={ 1 } overflow={ 'auto' }>
|
|
626
517
|
<Row.Center flexType='col' gap={ 2 } padding={ 2 }>
|
|
627
518
|
<Logo.Brands.LINE size='S' />
|
|
@@ -631,13 +522,11 @@ const Logos = {
|
|
|
631
522
|
<Logo.Brands.LINE size='3L' />
|
|
632
523
|
</Row.Center>
|
|
633
524
|
</Box>
|
|
634
|
-
</
|
|
525
|
+
</Card>
|
|
635
526
|
},
|
|
636
527
|
Twitter: () => {
|
|
637
|
-
return <
|
|
638
|
-
<Text.SubTitle borderBottom padding={ 1 }>
|
|
639
|
-
Twitter
|
|
640
|
-
</Text.SubTitle>
|
|
528
|
+
return <Card>
|
|
529
|
+
<Text.SubTitle borderBottom padding={ 1 }>Twitter</Text.SubTitle>
|
|
641
530
|
<Box padding={ 1 } overflow={ 'auto' }>
|
|
642
531
|
<Row.Center flexType='col' gap={ 2 } padding={ 2 }>
|
|
643
532
|
<Logo.Brands.Twitter size='S' />
|
|
@@ -647,7 +536,7 @@ const Logos = {
|
|
|
647
536
|
<Logo.Brands.Twitter size='3L' />
|
|
648
537
|
</Row.Center>
|
|
649
538
|
</Box>
|
|
650
|
-
</
|
|
539
|
+
</Card>
|
|
651
540
|
}
|
|
652
541
|
}
|
|
653
542
|
const Effections = {
|
|
@@ -815,7 +704,7 @@ const Effections = {
|
|
|
815
704
|
content: <Tooltips.Body
|
|
816
705
|
key={ index }
|
|
817
706
|
>
|
|
818
|
-
{ index }
|
|
707
|
+
{ ( index + 1 ).zeroEmbed( 2 ) }
|
|
819
708
|
</Tooltips.Body>
|
|
820
709
|
} )
|
|
821
710
|
} }
|
|
@@ -855,12 +744,12 @@ const Effections = {
|
|
|
855
744
|
paddingLeft={ '2/3' }
|
|
856
745
|
>
|
|
857
746
|
予約時間が更新されました
|
|
858
|
-
<Button.
|
|
747
|
+
<Button.Sub.S
|
|
859
748
|
color='white'
|
|
860
749
|
fontColor='posi'
|
|
861
750
|
>
|
|
862
751
|
元に戻す
|
|
863
|
-
</Button.
|
|
752
|
+
</Button.Sub.S>
|
|
864
753
|
</Row.Separate>
|
|
865
754
|
} )
|
|
866
755
|
} }
|
|
@@ -872,35 +761,34 @@ const Effections = {
|
|
|
872
761
|
let snackID = UUID()
|
|
873
762
|
Snackbar.add( {
|
|
874
763
|
snackID: snackID,
|
|
875
|
-
children:
|
|
876
|
-
<
|
|
877
|
-
<
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
{ `Some Text
|
|
764
|
+
children: <Column>
|
|
765
|
+
<Row.Left verticalAlign='top'>
|
|
766
|
+
<Img
|
|
767
|
+
src={ Logo.Images.defaultIcon( 'user' ) }
|
|
768
|
+
ssSphere={ 4 }
|
|
769
|
+
/>
|
|
770
|
+
<Text.Description>
|
|
771
|
+
{ `Some Text
|
|
884
772
|
Some Text
|
|
885
773
|
Some Text`}
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
774
|
+
</Text.Description>
|
|
775
|
+
</Row.Left>
|
|
776
|
+
<Row.Separate>
|
|
777
|
+
<Button.Sub.S
|
|
778
|
+
color='white'
|
|
779
|
+
onClick={ () => {
|
|
780
|
+
Snackbar.remove( snackID )
|
|
781
|
+
} }
|
|
782
|
+
>
|
|
783
|
+
閉じる
|
|
784
|
+
</Button.Sub.S>
|
|
785
|
+
<Anchor.Prime.S
|
|
786
|
+
href=''
|
|
787
|
+
>
|
|
788
|
+
詳細
|
|
789
|
+
</Anchor.Prime.S>
|
|
790
|
+
</Row.Separate>
|
|
791
|
+
</Column>
|
|
904
792
|
} )
|
|
905
793
|
} }
|
|
906
794
|
>
|
|
@@ -1820,18 +1708,6 @@ text5`}
|
|
|
1820
1708
|
{ value: 101,label: '101' },
|
|
1821
1709
|
{ value: 102,label: '102' }
|
|
1822
1710
|
] }
|
|
1823
|
-
DynamicOptionsOnSearch={ async ( keyword ) => {
|
|
1824
|
-
console.log( 'keyword',keyword )
|
|
1825
|
-
let options: Input.Autocomplete.Option[] = []
|
|
1826
|
-
for ( let i = 0; i < 100; i++ ) {
|
|
1827
|
-
options.push( {
|
|
1828
|
-
value: i,
|
|
1829
|
-
label: String( i ),
|
|
1830
|
-
searchValue: keyword
|
|
1831
|
-
} )
|
|
1832
|
-
}
|
|
1833
|
-
return options
|
|
1834
|
-
} }
|
|
1835
1711
|
/>
|
|
1836
1712
|
<Input.Autocomplete
|
|
1837
1713
|
name='autocomplete'
|
|
@@ -1851,8 +1727,7 @@ text5`}
|
|
|
1851
1727
|
/>
|
|
1852
1728
|
<Input.Autocomplete
|
|
1853
1729
|
name='autocomplete.dynamic'
|
|
1854
|
-
label='Input.Search'
|
|
1855
|
-
required
|
|
1730
|
+
label='Input.Search( Dynamic Search )'
|
|
1856
1731
|
options={ [
|
|
1857
1732
|
{ value: 1,label: '1' },
|
|
1858
1733
|
{ value: { value1: 2,value2: 3 },label: 'Object' },
|
|
@@ -1865,9 +1740,10 @@ text5`}
|
|
|
1865
1740
|
await $$.pending( () => { },1000 )
|
|
1866
1741
|
let options: Input.Autocomplete.Option[] = []
|
|
1867
1742
|
for ( let i = 0; i < 100; i++ ) {
|
|
1743
|
+
let index = i + 1
|
|
1868
1744
|
options.push( {
|
|
1869
|
-
value:
|
|
1870
|
-
label:
|
|
1745
|
+
value: index,
|
|
1746
|
+
label: 'option-' + index,
|
|
1871
1747
|
searchValue: keyword
|
|
1872
1748
|
} )
|
|
1873
1749
|
}
|
|
@@ -2729,205 +2605,130 @@ const Cropping = () => {
|
|
|
2729
2605
|
</Box>
|
|
2730
2606
|
</>
|
|
2731
2607
|
}
|
|
2732
|
-
const DesignConfig = {
|
|
2733
|
-
Darkmode: ( p: Omit<Input.List.Input,'options'> ) => {
|
|
2734
|
-
useEffect( () => {
|
|
2735
|
-
$$.interval.once( () => {
|
|
2736
|
-
Sheet.open( {
|
|
2737
|
-
sheetID: 'darkModeSelector',
|
|
2738
|
-
type: 'custom',
|
|
2739
|
-
parent: document.body,
|
|
2740
|
-
gravityPoint: 19,
|
|
2741
|
-
closeAtAroundClick: false,
|
|
2742
|
-
content: () => {
|
|
2743
|
-
return <Box padding={ 1 }>
|
|
2744
|
-
<Input.Segmented.Cloud
|
|
2745
|
-
cellStyles={ {
|
|
2746
|
-
flexCenter: true,
|
|
2747
|
-
padding: [ '1/4','1/2' ],
|
|
2748
|
-
isRounded: true,
|
|
2749
|
-
} }
|
|
2750
|
-
cellCheckedStyles={ {
|
|
2751
|
-
boxShadow: '2.normal',
|
|
2752
|
-
backgroundColor: 'theme',
|
|
2753
|
-
fontColor: 'white'
|
|
2754
|
-
} }
|
|
2755
|
-
ssCardBox
|
|
2756
|
-
backgroundColor={ 'layer.1' }
|
|
2757
|
-
isRounded
|
|
2758
|
-
gap={ '1/6' }
|
|
2759
|
-
fontColor={ '4.thin' }
|
|
2760
|
-
{ ...p }
|
|
2761
|
-
options={ [
|
|
2762
|
-
{ value: 'light',label: 'Light' },
|
|
2763
|
-
{ value: 'dim',label: 'Dim' },
|
|
2764
|
-
{ value: 'dark',label: 'Dark' }
|
|
2765
|
-
] }
|
|
2766
|
-
value={ Config.get().darkMode }
|
|
2767
|
-
onUpdateValidValue={ value => {
|
|
2768
|
-
let nextValue = value
|
|
2769
|
-
$$.localStrage.set( 'prf.darkMode',nextValue )
|
|
2770
|
-
Config.update.darkMode( nextValue )
|
|
2771
|
-
} }
|
|
2772
|
-
/>
|
|
2773
|
-
</Box>
|
|
2774
|
-
}
|
|
2775
|
-
} )
|
|
2776
|
-
},100 )
|
|
2777
|
-
},[] )
|
|
2778
2608
|
|
|
2779
|
-
|
|
2780
|
-
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
|
|
2785
|
-
|
|
2786
|
-
|
|
2609
|
+
const UserConfig = () => {
|
|
2610
|
+
let [ val_theme,set_theme ] = useState<ThemeColor>( Config.get().themeColor )
|
|
2611
|
+
useEffect( () => {
|
|
2612
|
+
$$.scope( () => {
|
|
2613
|
+
if ( val_theme === Config.get().themeColor ) return
|
|
2614
|
+
Config.update.themeColor( val_theme )
|
|
2615
|
+
$$.localStrage.set( 'prf.themeColor',val_theme )
|
|
2616
|
+
} )
|
|
2617
|
+
},[ val_theme ] )
|
|
2787
2618
|
|
|
2788
|
-
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
|
|
2792
|
-
|
|
2793
|
-
|
|
2794
|
-
|
|
2795
|
-
|
|
2796
|
-
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
2801
|
-
|
|
2802
|
-
|
|
2803
|
-
|
|
2804
|
-
|
|
2805
|
-
|
|
2806
|
-
},[ val_theme ] )
|
|
2619
|
+
return <Row.Left
|
|
2620
|
+
borderBottom
|
|
2621
|
+
gap={ 2 }
|
|
2622
|
+
padding={ [ '1/2',2 ] }
|
|
2623
|
+
overflow={ 'auto' }
|
|
2624
|
+
freeCSS={ {
|
|
2625
|
+
whiteSpace: 'nowrap'
|
|
2626
|
+
} }
|
|
2627
|
+
>
|
|
2628
|
+
<Row.Left>
|
|
2629
|
+
<Text.Paragraph>Roundness</Text.Paragraph>
|
|
2630
|
+
<Input.Slider
|
|
2631
|
+
min={ 0 }
|
|
2632
|
+
max={ 5 }
|
|
2633
|
+
step={ 1 }
|
|
2634
|
+
value={ Config.get().roundness }
|
|
2635
|
+
onUpdateValidValue={ value => {
|
|
2636
|
+
let nextValue = value
|
|
2807
2637
|
|
|
2808
|
-
|
|
2809
|
-
|
|
2638
|
+
$$.interval.once( () => {
|
|
2639
|
+
$$.localStrage.set( 'prf.roundness',nextValue )
|
|
2640
|
+
Config.update.roundness( Number( nextValue ) as Roundness )
|
|
2641
|
+
},1000,'updateRoundness' )
|
|
2642
|
+
} }
|
|
2643
|
+
/>
|
|
2644
|
+
</Row.Left>
|
|
2645
|
+
<Row.Left>
|
|
2646
|
+
<Text.Paragraph>Dark</Text.Paragraph>
|
|
2647
|
+
<Input.Segmented.Cloud
|
|
2648
|
+
cellStyles={ {
|
|
2649
|
+
flexCenter: true,
|
|
2650
|
+
padding: [ '1/4','1/2' ],
|
|
2651
|
+
} }
|
|
2652
|
+
cellCheckedStyles={ {
|
|
2653
|
+
boxShadow: '2.normal',
|
|
2654
|
+
backgroundColor: 'theme',
|
|
2655
|
+
fontColor: 'white'
|
|
2656
|
+
} }
|
|
2657
|
+
ssCardBox
|
|
2658
|
+
backgroundColor={ 'layer.1' }
|
|
2659
|
+
gap={ '1/6' }
|
|
2660
|
+
fontColor={ '4.thin' }
|
|
2661
|
+
options={ [
|
|
2662
|
+
{ value: 'light',label: 'Light' },
|
|
2663
|
+
{ value: 'dim',label: 'Dim' },
|
|
2664
|
+
{ value: 'dark',label: 'Dark' },
|
|
2665
|
+
{ value: 'auto',label: 'Auto' },
|
|
2666
|
+
] }
|
|
2667
|
+
value={ Config.get().darkMode }
|
|
2668
|
+
onUpdateValidValue={ value => {
|
|
2669
|
+
let nextValue = value
|
|
2670
|
+
$$.localStrage.set( 'prf.darkMode',nextValue )
|
|
2671
|
+
Config.update.darkMode( nextValue )
|
|
2672
|
+
} }
|
|
2673
|
+
/>
|
|
2674
|
+
</Row.Left>
|
|
2675
|
+
<Row.Left>
|
|
2676
|
+
<Text.Paragraph>Color</Text.Paragraph>
|
|
2677
|
+
<Row.Left gap={ '1/6' }>
|
|
2678
|
+
{ Object.entries( ThemeColors ).map( ( [ key,themeColor ] ) => {
|
|
2679
|
+
let isSelected = key === val_theme
|
|
2810
2680
|
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
|
|
2829
|
-
|
|
2830
|
-
|
|
2681
|
+
return <Button.Clear
|
|
2682
|
+
key={ key }
|
|
2683
|
+
color='cloud'
|
|
2684
|
+
padding={ '1/2' }
|
|
2685
|
+
textAlign='center'
|
|
2686
|
+
opacity={ isSelected ? 'max' : 'low' }
|
|
2687
|
+
isActive={ isSelected }
|
|
2688
|
+
isActiveStyles={ {
|
|
2689
|
+
boxShadow: '2.remark',
|
|
2690
|
+
backgroundColor: key as ThemeColor,
|
|
2691
|
+
fontColor: 'white'
|
|
2692
|
+
} }
|
|
2693
|
+
onClick={ () => {
|
|
2694
|
+
set_theme( key as ThemeColor )
|
|
2695
|
+
} }
|
|
2696
|
+
>
|
|
2697
|
+
<Column gap={ '1/2' } textAlign='center'>
|
|
2698
|
+
<Box
|
|
2699
|
+
position={ 'relative' }
|
|
2700
|
+
margin={ 'auto' }
|
|
2701
|
+
backgroundColor={ key as ThemeColor }
|
|
2702
|
+
ssSquare={ 2 }
|
|
2703
|
+
borderRadius={ '1.tone.primary' }
|
|
2704
|
+
>
|
|
2831
2705
|
<Box
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
ssAbsoluteCovered
|
|
2839
|
-
border
|
|
2840
|
-
opacity={ isSelected ? 'max' : 'low' }
|
|
2841
|
-
borderWidth={ 2 }
|
|
2842
|
-
transition={ 'short' }
|
|
2843
|
-
isRounded
|
|
2844
|
-
freeCSS={ {
|
|
2845
|
-
transform: 'scale(1.25)',
|
|
2846
|
-
} }
|
|
2847
|
-
/>
|
|
2848
|
-
</Box>
|
|
2849
|
-
<Text.Supplement
|
|
2850
|
-
ssTextEllipsis
|
|
2706
|
+
ssAbsoluteCovered
|
|
2707
|
+
border
|
|
2708
|
+
opacity={ isSelected ? 'max' : 'low' }
|
|
2709
|
+
borderWidth={ 2 }
|
|
2710
|
+
transition={ 'short' }
|
|
2711
|
+
borderRadius={ '1.tone.primary' }
|
|
2851
2712
|
freeCSS={ {
|
|
2852
|
-
|
|
2853
|
-
} }
|
|
2854
|
-
>
|
|
2855
|
-
{ key.toCapital() }
|
|
2856
|
-
</Text.Supplement>
|
|
2857
|
-
</Column>
|
|
2858
|
-
</Button.Clear>
|
|
2859
|
-
} )
|
|
2860
|
-
|
|
2861
|
-
return <Sheet.Body>
|
|
2862
|
-
<Column padding={ 2 } gap={ 2 }>
|
|
2863
|
-
<Row.Separate>
|
|
2864
|
-
<Text.Paragraph>
|
|
2865
|
-
テーマを選択
|
|
2866
|
-
</Text.Paragraph>
|
|
2867
|
-
<Button.Sub
|
|
2868
|
-
color='cloud'
|
|
2869
|
-
ssSphere={ 3 }
|
|
2870
|
-
onClick={ () => {
|
|
2871
|
-
Sheet.close( sheetID )
|
|
2713
|
+
transform: 'scale(1.25)',
|
|
2872
2714
|
} }
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
gap={ '1/4' }
|
|
2715
|
+
/>
|
|
2716
|
+
</Box>
|
|
2717
|
+
<Text.Supplement
|
|
2718
|
+
display='none'
|
|
2719
|
+
ssTextEllipsis
|
|
2879
2720
|
freeCSS={ {
|
|
2880
|
-
|
|
2721
|
+
lineHeight: 1.25
|
|
2881
2722
|
} }
|
|
2882
2723
|
>
|
|
2883
|
-
{
|
|
2884
|
-
</
|
|
2724
|
+
{ isSelected && <FAI.Check /> } { key.toCapital() }
|
|
2725
|
+
</Text.Supplement>
|
|
2885
2726
|
</Column>
|
|
2886
|
-
</
|
|
2887
|
-
}
|
|
2888
|
-
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
$$.scope( async () => {
|
|
2892
|
-
$$.interval.once( () => {
|
|
2893
|
-
Sheet.open( {
|
|
2894
|
-
sheetID: 'themeColorSelector',
|
|
2895
|
-
type: 'custom',
|
|
2896
|
-
parent: document.body,
|
|
2897
|
-
gravityPoint: 17,
|
|
2898
|
-
closeAtParentBlur: false,
|
|
2899
|
-
closeAtAroundClick: false,
|
|
2900
|
-
content: () => {
|
|
2901
|
-
return <Box padding={ 1 }>
|
|
2902
|
-
<Button.Border
|
|
2903
|
-
isRounded
|
|
2904
|
-
fontColor='theme'
|
|
2905
|
-
onClick={ ( e ) => {
|
|
2906
|
-
OpenThemeSheet( {
|
|
2907
|
-
defaultColor: Config.get().themeColor,
|
|
2908
|
-
cb: ( newColor ) => { }
|
|
2909
|
-
} )
|
|
2910
|
-
} }
|
|
2911
|
-
>
|
|
2912
|
-
<Row.Center gap={ '1/3' }>
|
|
2913
|
-
<Box
|
|
2914
|
-
boxShadow={ '2.normal' }
|
|
2915
|
-
ssSquare={ 1 }
|
|
2916
|
-
borderRadius={ '1/3' }
|
|
2917
|
-
backgroundColor={ 'theme' }
|
|
2918
|
-
/>
|
|
2919
|
-
Theme: { Config.get().themeColor.toCapital() }
|
|
2920
|
-
</Row.Center>
|
|
2921
|
-
</Button.Border>
|
|
2922
|
-
</Box>
|
|
2923
|
-
}
|
|
2924
|
-
} )
|
|
2925
|
-
},100 )
|
|
2926
|
-
} )
|
|
2927
|
-
},[] )
|
|
2928
|
-
|
|
2929
|
-
return null
|
|
2930
|
-
}
|
|
2727
|
+
</Button.Clear>
|
|
2728
|
+
} ) }
|
|
2729
|
+
</Row.Left>
|
|
2730
|
+
</Row.Left>
|
|
2731
|
+
</Row.Left>
|
|
2931
2732
|
}
|
|
2932
2733
|
|
|
2933
2734
|
let DesignBook = () => {
|
|
@@ -2937,14 +2738,13 @@ let DesignBook = () => {
|
|
|
2937
2738
|
},[ val_tabIndex ] )
|
|
2938
2739
|
|
|
2939
2740
|
return <>
|
|
2940
|
-
<
|
|
2941
|
-
<DesignConfig.ThemeColor />
|
|
2741
|
+
<UserConfig />
|
|
2942
2742
|
<Column
|
|
2943
2743
|
gap={ 0 }
|
|
2944
|
-
minHeight={ 'contentHeight' }
|
|
2744
|
+
// minHeight={ 'contentHeight' }
|
|
2945
2745
|
// backgroundColor={ 'layer.1' }
|
|
2946
|
-
backgroundColor='gray'
|
|
2947
|
-
position={ 'relative' }
|
|
2746
|
+
// backgroundColor='gray'
|
|
2747
|
+
// position={ 'relative' }
|
|
2948
2748
|
freeCSS={ {
|
|
2949
2749
|
zIndex: 1
|
|
2950
2750
|
} }
|