amotify 0.3.19 → 0.3.20
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/UI_MAP.md +512 -0
- package/dist/@utils/color.d.ts +1 -0
- package/dist/fn/Input/Filer.js +1 -1
- package/dist/index.d.ts +1 -0
- package/package.json +1 -1
package/UI_MAP.md
ADDED
|
@@ -0,0 +1,512 @@
|
|
|
1
|
+
# amotify UI Map
|
|
2
|
+
|
|
3
|
+
> AIがコンポーネントのAPIを素早く把握するための参照ファイル。
|
|
4
|
+
> 型の詳細は `dist/` 配下の `.d.ts` を参照。
|
|
5
|
+
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## インポート
|
|
9
|
+
|
|
10
|
+
```ts
|
|
11
|
+
import { Button, Input, Sheet, ... } from 'amotify'
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## 共通型
|
|
17
|
+
|
|
18
|
+
| 型 | 値 |
|
|
19
|
+
|---|---|
|
|
20
|
+
| `Themecolor` | `'comun' \| 'leaf' \| 'heart' \| 'droplet' \| 'brick' \| 'flower' \| 'lip' \| 'wine' \| 'theater' \| 'bat' \| 'poizon' \| 'ufo' \| 'moon' \| 'rain' \| 'gem' \| 'drizzle' \| 'lemon' \| 'pizza' \| 'coffee' \| 'galaxy' \| ...60+` |
|
|
21
|
+
| `Darkmode` | `'light' \| 'auto' \| 'dark' \| 'dim'` |
|
|
22
|
+
| `Roundness` | `0 \| 1 \| 2 \| 3 \| 4 \| 5` |
|
|
23
|
+
| `Device` | `'' \| 'windows' \| 'android' \| 'iPhone' \| 'iPad' \| 'macOSX'` |
|
|
24
|
+
| `Browser` | `'' \| 'chrome' \| 'firefox' \| 'safari' \| 'opera' \| 'ie' \| 'edge'` |
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## StyleProps（スタイルプロパティ）
|
|
29
|
+
|
|
30
|
+
すべてのコンポーネントは `StyleProps.States` を継承。`xcss` で生のCSSも渡せる。
|
|
31
|
+
|
|
32
|
+
| namespace | 主なプロパティ |
|
|
33
|
+
|---|---|
|
|
34
|
+
| **Pargins** | `margin` `marginTop/Right/Bottom/Left` `padding` `paddingTop/Right/Bottom/Left` |
|
|
35
|
+
| **Borders** | `border` `borderTop/Right/Bottom/Left` `borderWidth` `borderColor` `borderStyle` `borderRadius` |
|
|
36
|
+
| **Fonts** | `fontColor` `fontSize` `fontWeight` `fontHeight` `textAlign` `textDecoration` |
|
|
37
|
+
| **FlexGrids** | `flexSizing` `flexWrap` `flexCenter` `flexType` `flexChilds` `flexGrid` `verticalAlign` `horizontalAlign` `gridCenter` `gridCols` |
|
|
38
|
+
| **Sizes** | `width` `height` `maxWidth` `minWidth` `maxHeight` `minHeight` `unitWidth` `unitHeight` |
|
|
39
|
+
| **StyleSets** | `ssCardBox` `ssPushable` `ssSphere` `ssSquare` `ssAbsoluteCovered` `ssTextEllipsis` `ssNowrapText` `ssHiddenOnBreak` `ssEffectsOnActive` `isRounded` `isSquared` |
|
|
40
|
+
| **Other** | `backgroundColor` `gradients` `boxShadow` `display` `gap` `overflow` `position` `top/right/bottom/left` `opacity` `transition` `xcss` `UnderBreakPointStyles` |
|
|
41
|
+
|
|
42
|
+
**単位 (Pargins.Unit):** `0 \| '1/12' \| '1/6' \| '1/4' \| '1/3' \| '1/2' \| '2/3' \| '3/4' \| 1 \| 1.5 \| 2 \| 2.5 \| 3 \| 4 \| 6 \| 'auto' \| number`
|
|
43
|
+
|
|
44
|
+
**色 (UniColors):** `'inherit' \| 'theme' \| 'posi' \| 'nega' \| 'warn' \| 'white' \| 'black' \| 'dark' \| Themecolor`
|
|
45
|
+
|
|
46
|
+
**レイヤー色:** `'layer.0' 〜 'layer.6'`
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## atoms/
|
|
51
|
+
|
|
52
|
+
### Box
|
|
53
|
+
汎用コンテナ。全HTMLタグをジェネリクスで指定可。
|
|
54
|
+
```ts
|
|
55
|
+
<Box htmlTag="section" flexType="col" padding={2}>...</Box>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Flex / FlexBr / FlexMargin / Column / Span / P
|
|
59
|
+
Box の省略バリアント。それぞれ flex-row / break付き / margin付き / flex-col / span / p。
|
|
60
|
+
|
|
61
|
+
### FAI (Font Awesome Icon)
|
|
62
|
+
```ts
|
|
63
|
+
<FAI icon={faUser} fontSize="3.paragraph" />
|
|
64
|
+
// ショートカット: FAI.User / FAI.Search / FAI.Check / FAI.Trash / FAI.Plus / FAI.Gear ...
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Img
|
|
68
|
+
```ts
|
|
69
|
+
<Img src="..." alt="..." showExpand />
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Card
|
|
73
|
+
- Variants: `Card` `Card.Border` `Card.Plain` `Card.Cloud` `Card.Shadow`
|
|
74
|
+
- `jsxElement` でラップ要素を変更可
|
|
75
|
+
|
|
76
|
+
### Grid
|
|
77
|
+
```ts
|
|
78
|
+
<Grid gridCols={3} gap={2}>...</Grid>
|
|
79
|
+
<Grid.Layout gridTemplateColumns="..." gridTemplateRows="..." gridChildTemplates={[...]} />
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Placeholder
|
|
83
|
+
```ts
|
|
84
|
+
<Placeholder backgroundColor="cloud" width={1} height={3} />
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Logo
|
|
88
|
+
- Sizes: `S \| R \| L \| 2L \| 3L` / Colors: `normal \| white`
|
|
89
|
+
- Sub: `Logo.Brands.MingooLogoH` `Logo.Brands.Google` `Logo.Brands.LINE` ...
|
|
90
|
+
|
|
91
|
+
### CacheRender
|
|
92
|
+
```ts
|
|
93
|
+
<CacheRender params={deps}>{children}</CacheRender>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
---
|
|
97
|
+
|
|
98
|
+
## fn/
|
|
99
|
+
|
|
100
|
+
### Button / Label / Anchor
|
|
101
|
+
|
|
102
|
+
**Tones:** `plain \| link \| normal \| border \| prime \| sub \| clear \| fillToBorder \| borderToFill`
|
|
103
|
+
**Colors:** `plain \| theme \| posi \| nega \| warn \| cloud \| trans \| white` (Anchor は `+layer`)
|
|
104
|
+
**Sizes:** `plain \| xsmall \| small \| regular \| large`
|
|
105
|
+
|
|
106
|
+
```ts
|
|
107
|
+
// tone + color + size を個別指定
|
|
108
|
+
<Button tone="prime" color="theme" size="regular">送信</Button>
|
|
109
|
+
|
|
110
|
+
// 省略バリアント (Tone.Size の形式)
|
|
111
|
+
<Button.Prime.R>送信</Button.Prime.R>
|
|
112
|
+
<Button.Border.S>キャンセル</Button.Border.S>
|
|
113
|
+
|
|
114
|
+
// フォーム送信
|
|
115
|
+
<Button onFormSubmit={['formName', ({ body, isValid, serialLock }) => { ... }]} />
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
- `isLocked` `isActive` `isActiveStyles` でロック/アクティブ制御
|
|
119
|
+
- Label は `htmlFor` 追加 / Anchor は `href` `newTab` `sync` `download` 追加
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
### Input（全フォーム入力）
|
|
124
|
+
|
|
125
|
+
**共通props (CoreInput):**
|
|
126
|
+
```ts
|
|
127
|
+
name, form, componentId, required, enableFormSubmit, showInitValidation,
|
|
128
|
+
onValidate, onUpdateValue, onUpdateValidValue, onUserAction,
|
|
129
|
+
override: 'never' (default)
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
**onValidate シグネチャ:**
|
|
133
|
+
```ts
|
|
134
|
+
(value: T, eventType: 'init'|'update'|'update.remote'|'override'|'refresh', opt: Status)
|
|
135
|
+
=> Promise<{ ok: boolean; notice?: { type: 'valid'|'invalid'|'warn'; label: ReactElement }[] }>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
**tone (BoxTone):** `'border' \| 'cloud' \| 'bottomBorder' \| 'plain'`
|
|
139
|
+
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
#### Input.TextField
|
|
143
|
+
```ts
|
|
144
|
+
<Input.TextField
|
|
145
|
+
restrict="email" // 'text'|'katakana'|'hankaku.katakana'|'number'|'digitNumber'|'tel'|'email'|'url'|'fileName'|'password'|'postal'|'creditCard'|'concealed'
|
|
146
|
+
multiline autoHeight maxLength={200}
|
|
147
|
+
clearButton leftIcon={<FAI.Search />}
|
|
148
|
+
/>
|
|
149
|
+
// バリアント
|
|
150
|
+
<Input.TextField.Email /> <Input.TextField.Tel /> <Input.TextField.Password />
|
|
151
|
+
<Input.TextField.Postal /> <Input.TextField.Money.JPY />
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
#### Input.Select
|
|
155
|
+
```ts
|
|
156
|
+
<Input.Select
|
|
157
|
+
options={[{ value: 'a', label: <>A</> }]}
|
|
158
|
+
pickerPosition={1} // 1|2|3|4
|
|
159
|
+
nativePicker
|
|
160
|
+
/>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
#### Input.Autocomplete
|
|
164
|
+
```ts
|
|
165
|
+
<Input.Autocomplete
|
|
166
|
+
options={[...]}
|
|
167
|
+
multiSelect
|
|
168
|
+
onDynamicSearchOptions={async (keyword) => [...]}
|
|
169
|
+
onSelectorRender={({ option, isSelected, onAdd }) => <div />}
|
|
170
|
+
/>
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
#### Input.Drum
|
|
174
|
+
```ts
|
|
175
|
+
<Input.Drum options={[{ value: 1, label: <>1月</> }, null, ...]} isHorizontal />
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
#### Input.Radio / Input.Checkbox / Input.List
|
|
179
|
+
```ts
|
|
180
|
+
<Input.Radio options={[{ value: 'a', label: <>A</> }]} tone="border" />
|
|
181
|
+
// Variants: .Normal .Border .Cloud .Simple .Vivid
|
|
182
|
+
<Input.Checkbox options={[...]} />
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
#### Input.Checker
|
|
186
|
+
```ts
|
|
187
|
+
<Input.Checker label={<>同意する</>} value={true} />
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
#### Input.Segmented
|
|
191
|
+
```ts
|
|
192
|
+
<Input.Segmented options={[...]} />
|
|
193
|
+
// Variants: .Cloud .CloudTheme .CloudMono .Border .BorderVivid .Bottomline
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
#### Input.Slider
|
|
197
|
+
```ts
|
|
198
|
+
<Input.Slider min={0} max={100} step={1} color="theme" legends />
|
|
199
|
+
<Input.Slider.Range min={0} max={100} step={1} />
|
|
200
|
+
// Variants: .Small .Medium .Large / .Range.Small .Range.Medium .Range.Large
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
#### Input.Switch
|
|
204
|
+
```ts
|
|
205
|
+
<Input.Switch size="regular" color="theme" isApply />
|
|
206
|
+
// Variants: .S .R .L
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
#### Input.Time
|
|
210
|
+
```ts
|
|
211
|
+
<Input.Time.Date value="2024-01-01" min="2020-01-01" />
|
|
212
|
+
<Input.Time.Clock /> <Input.Time.Week /> <Input.Time.Month /> <Input.Time.Year />
|
|
213
|
+
<Input.Time.Locale.JP.WarekiDate />
|
|
214
|
+
<Input.Time.Periods.Date value={['2024-01-01', '2024-12-31']} />
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
#### Input.Filer
|
|
218
|
+
```ts
|
|
219
|
+
<Input.Filer accept="image" limit={5} isNameEditable />
|
|
220
|
+
// プログラム操作
|
|
221
|
+
Input.Filer.fn.openDialog({ accept: 'image', multiple: true, onChange: (files) => {} })
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
#### Input.Segmented / Input.Color / Input.Contenteditable / Input.DigitCharacters
|
|
225
|
+
```ts
|
|
226
|
+
<Input.Color />
|
|
227
|
+
<Input.Contenteditable />
|
|
228
|
+
<Input.DigitCharacters />
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
#### Input.CollectForm
|
|
232
|
+
フォームグループのラッパー。`form` 属性でフォーム名を揃える。
|
|
233
|
+
|
|
234
|
+
---
|
|
235
|
+
|
|
236
|
+
### Sheet（モーダル・ドロワー）
|
|
237
|
+
|
|
238
|
+
```ts
|
|
239
|
+
// 表示 (Wrapper をルートに配置必須)
|
|
240
|
+
Sheet.Wrapper() // ルートに一度だけ配置
|
|
241
|
+
|
|
242
|
+
Sheet.open('bottomCenter', {
|
|
243
|
+
content: <MyContent />,
|
|
244
|
+
size: 'R', // 'XS'|'S'|'R'|'L'|'2L'|'3L'|'MAX'
|
|
245
|
+
sheetID: 'mySheet',
|
|
246
|
+
backgroundEffect: true,
|
|
247
|
+
closeAtAroundClick: true,
|
|
248
|
+
closeAtEscapeKeyDown: true,
|
|
249
|
+
closeAtSwipeDown: true,
|
|
250
|
+
})
|
|
251
|
+
|
|
252
|
+
Sheet.close('mySheet')
|
|
253
|
+
Sheet.closeAll()
|
|
254
|
+
Sheet.update('mySheet', { size: 'L' })
|
|
255
|
+
Sheet.image(params, src) // 画像表示ショートカット
|
|
256
|
+
|
|
257
|
+
// Type: 'topLeft'|'topCenter'|'topRight'|'middleLeft'|'middleCenter'|'middleRight'
|
|
258
|
+
// 'bottomLeft'|'bottomCenter'|'bottomRight'
|
|
259
|
+
// 'drawer.left'|'drawer.right'|'drawer.bottom'|'custom'
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
---
|
|
263
|
+
|
|
264
|
+
### Snackbar（トースト通知）
|
|
265
|
+
|
|
266
|
+
```ts
|
|
267
|
+
Snackbar.Wrapper() // ルートに配置
|
|
268
|
+
|
|
269
|
+
Snackbar.add({ children: <>保存しました</>, secondsToClose: 3, snackID: 'save' })
|
|
270
|
+
Snackbar.add({ customChildren: ({ close }) => <div onClick={close}>✕</div> })
|
|
271
|
+
Snackbar.remove('save')
|
|
272
|
+
Snackbar.removeALL()
|
|
273
|
+
```
|
|
274
|
+
|
|
275
|
+
---
|
|
276
|
+
|
|
277
|
+
### Tooltips
|
|
278
|
+
|
|
279
|
+
```ts
|
|
280
|
+
Tooltips.open({ event, content: <MyTip />, tipsID: 'tip1', nextToCursor: true })
|
|
281
|
+
Tooltips.close('tip1')
|
|
282
|
+
Tooltips.closeALL()
|
|
283
|
+
Tooltips.notice(<>エラー</>, { closeToSeconds: 5 })
|
|
284
|
+
Tooltips.Body // ツールチップ内のコンテナ
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
---
|
|
288
|
+
|
|
289
|
+
### Table / DataGrid
|
|
290
|
+
|
|
291
|
+
**Table:** `Table.Normal` / `Table.Data` (ソート・フィルタ・選択・ドラッグ付き)
|
|
292
|
+
|
|
293
|
+
**DataGrid:**
|
|
294
|
+
```ts
|
|
295
|
+
<DataGrid
|
|
296
|
+
header={[{ key: 'name', label: <>名前</>, sortable: 1, filterable: true }]}
|
|
297
|
+
body={[{ name: { data: '田中' } }]}
|
|
298
|
+
footer={{ name: { data: '合計' } }}
|
|
299
|
+
tone="border" // 'border'|'border.vertical'|'border.horizontal'|false
|
|
300
|
+
onSelected={(rows) => {}}
|
|
301
|
+
onSorted={(col, sort) => {}}
|
|
302
|
+
/>
|
|
303
|
+
// 付属コンポーネント
|
|
304
|
+
<DataGrid.SearchInput datagridID="id" />
|
|
305
|
+
<DataGrid.Paging datagridID="id" />
|
|
306
|
+
<DataGrid.RowCount datagridID="id" options={[10, 25, 50]} />
|
|
307
|
+
<DataGrid.Info datagridID="id" />
|
|
308
|
+
// メソッド
|
|
309
|
+
DataGrid.getBodyRows('id')
|
|
310
|
+
DataGrid.reset('id')
|
|
311
|
+
DataGrid.refreshBody('id')
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
---
|
|
315
|
+
|
|
316
|
+
### Loader
|
|
317
|
+
|
|
318
|
+
```ts
|
|
319
|
+
Loader.Wrapper() // ルートに配置
|
|
320
|
+
|
|
321
|
+
<Loader.Theme.R /> // Color.Size の形式
|
|
322
|
+
// Colors: Theme / Posi / Nega / Warn / White / Cloud
|
|
323
|
+
// Sizes: S / R / L / XL / MAX
|
|
324
|
+
|
|
325
|
+
Loader.fn.corner.active() // コーナーローダー表示
|
|
326
|
+
Loader.fn.corner.stop()
|
|
327
|
+
Loader.fn.mini.active('id') // インラインローダー表示
|
|
328
|
+
Loader.fn.mini.stop('id')
|
|
329
|
+
Loader.fn.stopALL()
|
|
330
|
+
```
|
|
331
|
+
|
|
332
|
+
---
|
|
333
|
+
|
|
334
|
+
### RootViewController（アプリシェル）
|
|
335
|
+
|
|
336
|
+
```ts
|
|
337
|
+
<RootViewController.Base
|
|
338
|
+
topNavigation={<RootViewController.TopNavigation>...</RootViewController.TopNavigation>}
|
|
339
|
+
footerNavigation={<RootViewController.FooterNavigation>...</RootViewController.FooterNavigation>}
|
|
340
|
+
sideNavigation={<RootViewController.SideNavigation>...</RootViewController.SideNavigation>}
|
|
341
|
+
/>
|
|
342
|
+
<RootViewController.Comps.Button path="/home" pathGroup={['/home', /^\/sub/]}>
|
|
343
|
+
ホーム
|
|
344
|
+
</RootViewController.Comps.Button>
|
|
345
|
+
|
|
346
|
+
// 計測値
|
|
347
|
+
RootViewController.fn.viewHeight / viewWidth / contentHeight / contentWidth
|
|
348
|
+
RootViewController.fn.topNavHeight / footerNavHeight / safeAreaTop / safeAreaBottom
|
|
349
|
+
```
|
|
350
|
+
|
|
351
|
+
---
|
|
352
|
+
|
|
353
|
+
### PageViewController
|
|
354
|
+
|
|
355
|
+
```ts
|
|
356
|
+
<PageViewController viewIndex={0} views={[<PageA />, <PageB />]} />
|
|
357
|
+
```
|
|
358
|
+
|
|
359
|
+
---
|
|
360
|
+
|
|
361
|
+
### SwipeView
|
|
362
|
+
|
|
363
|
+
```ts
|
|
364
|
+
<SwipeView
|
|
365
|
+
options={{ loop: true, autoSwipems: 3000, visibilitySurroundSlide: true }}
|
|
366
|
+
onSlideCallback={(idx, eventType) => {}}
|
|
367
|
+
>
|
|
368
|
+
{slides}
|
|
369
|
+
</SwipeView>
|
|
370
|
+
```
|
|
371
|
+
|
|
372
|
+
---
|
|
373
|
+
|
|
374
|
+
### TabBar
|
|
375
|
+
|
|
376
|
+
```ts
|
|
377
|
+
<TabBar
|
|
378
|
+
tabIndex={0}
|
|
379
|
+
tabs={[{ label: 'タブ1' }, { label: 'タブ2' }]}
|
|
380
|
+
onTabChange={(idx) => {}}
|
|
381
|
+
/>
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
---
|
|
385
|
+
|
|
386
|
+
### Plate
|
|
387
|
+
|
|
388
|
+
```ts
|
|
389
|
+
<Plate size="R">...</Plate>
|
|
390
|
+
// Sizes: 'MIN'|'XS'|'S'|'R'|'L'|'XL'|'MAX'
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
---
|
|
394
|
+
|
|
395
|
+
### Effect
|
|
396
|
+
|
|
397
|
+
```ts
|
|
398
|
+
<Ripple>クリック要素</Ripple>
|
|
399
|
+
<Pudding>バウンス要素</Pudding>
|
|
400
|
+
<FadeIn animationTime={300} animationDelay={100}>...</FadeIn>
|
|
401
|
+
<FadeUp>...</FadeUp>
|
|
402
|
+
```
|
|
403
|
+
|
|
404
|
+
---
|
|
405
|
+
|
|
406
|
+
### Cropper
|
|
407
|
+
|
|
408
|
+
```ts
|
|
409
|
+
<Cropper
|
|
410
|
+
aspectRatio="16:9" // '1:1'|'16:9'|'9:16'|'4:3'|'3:4'|'3:1'|'1:2'|[w,h]
|
|
411
|
+
onProcessFinished={(files) => {}}
|
|
412
|
+
/>
|
|
413
|
+
```
|
|
414
|
+
|
|
415
|
+
---
|
|
416
|
+
|
|
417
|
+
## mols/
|
|
418
|
+
|
|
419
|
+
### Accordion
|
|
420
|
+
```ts
|
|
421
|
+
<Accordion defaultOpen accordionID="acc1" slideAnimation="fast" onToggleEvent={(open) => {}}>
|
|
422
|
+
コンテンツ
|
|
423
|
+
</Accordion>
|
|
424
|
+
Accordion.fn.open('acc1') / .close('acc1') / .toggle('acc1') / .isOpen('acc1')
|
|
425
|
+
```
|
|
426
|
+
|
|
427
|
+
### Literal（見出し・テキスト）
|
|
428
|
+
```ts
|
|
429
|
+
<Literal.Title>タイトル</Literal.Title>
|
|
430
|
+
<Literal.SubTitle /> <Literal.ThirdTitle /> <Literal.Paragraph />
|
|
431
|
+
<Literal.Description /> <Literal.Mini /> <Literal.Micro />
|
|
432
|
+
<Literal.NowrapSpan />
|
|
433
|
+
```
|
|
434
|
+
|
|
435
|
+
### List / ListItem / Row
|
|
436
|
+
```ts
|
|
437
|
+
// レイアウトヘルパー
|
|
438
|
+
<List.Center>...</List.Center> <List.Left /> <List.Right /> <List.Separate />
|
|
439
|
+
<Row.Center /> <Row.Left /> <Row.Right /> <Row.Separate />
|
|
440
|
+
```
|
|
441
|
+
|
|
442
|
+
### LinkifyText
|
|
443
|
+
```ts
|
|
444
|
+
<LinkifyText text="URLを含むテキスト https://example.com" />
|
|
445
|
+
```
|
|
446
|
+
|
|
447
|
+
### MarkerPen
|
|
448
|
+
テキスト中のキーワードをハイライト表示。
|
|
449
|
+
|
|
450
|
+
---
|
|
451
|
+
|
|
452
|
+
## @utils/
|
|
453
|
+
|
|
454
|
+
### Config
|
|
455
|
+
```ts
|
|
456
|
+
Config.launch({ themeColor: 'comun', darkMode: 'light', roundness: 2 })
|
|
457
|
+
Config.get() // 現在の設定取得
|
|
458
|
+
Config.update.themeColor('heart')
|
|
459
|
+
Config.update.darkMode('dark')
|
|
460
|
+
Config.update.roundness(3)
|
|
461
|
+
Config.get().screen.isBreakpoint() // レスポンシブ判定
|
|
462
|
+
```
|
|
463
|
+
|
|
464
|
+
### pageRouter
|
|
465
|
+
```ts
|
|
466
|
+
pageRouter.push('/path') // 遷移
|
|
467
|
+
pageRouter.push('/path', true) // 新タブ
|
|
468
|
+
pageRouter.back()
|
|
469
|
+
pageRouter.open('https://...') // 外部URL
|
|
470
|
+
pageRouter.pushSync('/path') // 同期遷移
|
|
471
|
+
pageRouter.pushAsync('/path') // 非同期遷移
|
|
472
|
+
```
|
|
473
|
+
|
|
474
|
+
### useRemote（コンポーネント間通信）
|
|
475
|
+
```ts
|
|
476
|
+
// 送信
|
|
477
|
+
useRemote.bridge('channelKey', { data: '...' })
|
|
478
|
+
// 受信 (useEffect内など)
|
|
479
|
+
const msg = useRemote.catch<MyType>('channelKey')
|
|
480
|
+
```
|
|
481
|
+
|
|
482
|
+
### useRouterEffect
|
|
483
|
+
```ts
|
|
484
|
+
useRouterEffect({ beforeCB: () => {}, afterCB: () => {}, afterFirstCB: () => {} })
|
|
485
|
+
```
|
|
486
|
+
|
|
487
|
+
### useUpdateEffect
|
|
488
|
+
マウント時をスキップする `useEffect`。
|
|
489
|
+
|
|
490
|
+
### dragEffect
|
|
491
|
+
```ts
|
|
492
|
+
// ドラッグ開始
|
|
493
|
+
dragEffect.Start('itemType', { startEvent, dragElement }, ({ idx, end }) => {})
|
|
494
|
+
// ドロップエリア
|
|
495
|
+
<dragEffect.DropArea dragInfo={{ type: 'itemType', marker: 'bottom' }}>...</dragEffect.DropArea>
|
|
496
|
+
<dragEffect.DropSign dragInfo={{ type: 'itemType' }} />
|
|
497
|
+
dragEffect.AutoScroll(event)
|
|
498
|
+
```
|
|
499
|
+
|
|
500
|
+
### ThemeColors / ColorRecords
|
|
501
|
+
```ts
|
|
502
|
+
ThemeColors.comun.hex // '#...'
|
|
503
|
+
ThemeColors.heart.alfa(0.5) // 'rgba(..., 0.5)'
|
|
504
|
+
ColorRecords // { name: Themecolor, hex: string, isBrand: boolean }[]
|
|
505
|
+
```
|
|
506
|
+
|
|
507
|
+
### LaunchReactApp
|
|
508
|
+
```ts
|
|
509
|
+
<LaunchReactApp inlineCSS isRootPage>
|
|
510
|
+
<App />
|
|
511
|
+
</LaunchReactApp>
|
|
512
|
+
```
|
package/dist/@utils/color.d.ts
CHANGED
package/dist/fn/Input/Filer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as r,c as f,d as G,e as H}from"../../chunk-C5N2D3ZX.js";import{Fragment as ne,jsx as n,jsxs as
|
|
1
|
+
import{b as r,c as f,d as G,e as H}from"../../chunk-C5N2D3ZX.js";import{Fragment as ne,jsx as n,jsxs as c}from"react/jsx-runtime";import{useState as Q,useEffect as Y}from"react";import _,{UUID as b,useStore as ee}from"jmini";import{$$fromRoot as k,ExtractStyles as se}from"../../@utils";import{Box as h,FAI as L,Flex as R,Column as te}from"../../atoms";import{Literal as re,Row as pe}from"../../mols";import{Button as M}from"../Button";import j from"../Snackbar";import{OptionalInputWrapper as ue,BoxWrapper as me,CoreEffects as le,DefaultBoxishStyles as ce}from"./core";import de from"./TextField";import{InputFilerClasses as y}from"../../@styles/componentClasses";import{faCloudArrowUp as fe}from"@fortawesome/free-solid-svg-icons/faCloudArrowUp";function ge(e){let{value:l,states:o}=e,{required:u}=o,t=[];return u&&!l.length&&t.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!t.filter(({type:m})=>m=="invalid").length,notice:t}}const ae={List:e=>{let{rootStates:l,val_status:o,set_status:u}=e;if(l.useSystemOnly)return null;let t=l.limit-(o.rawValue||[]).length,m=(o.rawValue||[]).map((p,a)=>n(ae.ListCell,f(r({},e),{index:a,val_file:p}),p.name));t>0&&m.push(n(h,f(r({htmlTag:"label"},l.cellStyles),{className:[l.cellClassName,y("AddButton")].join(" "),"data-component-id":o.componentId,htmlFor:l.id,tabIndex:l.tabIndex,onKeyDown:p=>{let{key:a}=p;l.tabIndex!=-1&&_.isOneOf(a," ","Enter")&&k("#"+l.id).click()},children:c(pe.Center,{padding:["1/3",0],children:[n(h,{isRounded:!0,className:y("AddIcon"),children:n(L,{icon:fe,className:y("Icon"),fontColor:"theme",fontSize:"4.thirdTitle",backgroundColor:"theme.opa.low",ssSphere:3,padding:"1/2"})}),c(h,{children:[c(h,{fontColor:"theme",fontSize:"2.normal",isSemiBoldFont:!0,children:["\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E(",t,")"]}),n(re.Micro,{fontColor:"4.thin",isSemiBoldFont:!0,children:"\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7"})]})]})}),"AddButton"));let[i]=se(l);return n(te,f(r({flexSizing:"auto"},i),{className:l.className,children:m}))},ListCell:e=>{let{index:l,rootStates:o,val_file:u,val_status:t,set_status:m}=e,{name:i,size:p,type:a}=u,[d,v]=Q(!1),I=b(),J=p.rank(),[K,W]=i.replace(/\s/g,"_").replace(/(.*)\.(.*)$/,"$1 $2").split(" "),s="\u30D5\u30A1\u30A4\u30EB";return a.match(/image/)?s=a.replace(/image\//,""):a.match(/pdf/)?s="PDF":a.match(/csv/)?s="CSV":a.match(/spreadsheet/)?s="SpreadSheet":a.match(/presentation/)?s="PowerPoint":a.match(/word/)?s="Word":a.match(/zip/)?s="Zip":a.match(/powerpoint/)?s="PowerPoint":a.match(/html/)?s="HTML":a.match(/js/)?s="JavaScript":a.match(/css/)?s="CSS":a.match(/text\/plain/)&&(s="\u30C6\u30AD\u30B9\u30C8"),Y(()=>{d&&setTimeout(()=>{k("#"+I).focus()},100)},[d]),c(R,f(r({verticalAlign:"center",flexWrap:!1,gap:1,className:o.cellClassName},o.cellStyles),{children:[n(L.File,{fontSize:"4.thirdTitle",fontColor:"4.thin"}),c(h,{flexSizing:0,children:[n(h,{children:n(R,{verticalAlign:"center",gap:"2/3",flexWrap:!1,className:y("FileName"),children:d?n(ne,{children:c(te,{flexSizing:0,gap:"1/2",children:[c(R,{gap:"2/3",verticalAlign:"center",children:[n(de,{tone:"border",wrapStyles:{flexSizing:"auto"},restrict:"fileName",name:"name",required:!0,id:I,form:"form-"+I,enableFormSubmit:!0,value:K,onKeyDown:F=>{let{key:B}=F;B=="Escape"&&v(!1)}}),c(h,{children:[". ",W]})]}),c(R,{gap:"2/3",horizontalAlign:"right",flexWrap:!1,children:[n(M.Sub.S,{padding:["2/3",1],onClick:()=>{v(!1)},children:"\u9589\u3058\u308B"}),n(M.Prime.S,{padding:["2/3",1],onFormSubmit:["form-"+I,F=>H(void 0,null,function*(){let{name:B}=F.body,w=[...t.rawValue],N=w[l],X=N.id;if(!N)return;let P=yield String(yield N.convert("dataURL")).toBlob(u.type);if(!P)return;let $=new File([P],B+"."+W,{type:N.type});$.id=X,w[l]=$,m(O=>f(r({},O),{rawValue:w,eventType:"update",eventID:b(12),isInspected:!1})),v(!1)})],children:"\u6C7A\u5B9A"})]})]})}):c(ne,{children:[i,!!o.isNameEditable&&n(M.Clear,{ssSphere:2.5,flexSizing:"none",fontColor:"4.thin",padding:"1/3",ssEffectsOnActive:"expand",color:"cloud",onClick:()=>{v(!0)},children:n(L.Pen,{})})]})})}),!d&&c(h,{fontSize:"1.mini",fontColor:"4.thin",flexSizing:0,children:[s,"\u30D5\u30A1\u30A4\u30EB / ",J,"B"]})]}),n(M.Sub,{color:"cloud",fontColor:"4.thin",ssSphere:3,onClick:()=>{let F=[...t.rawValue];F[l]&&(F.splice(l,1),m(w=>f(r({},w),{rawValue:F,eventType:"update",eventID:b(12),isInspected:!1})))},children:n(L.X,{})})]}))}},ye=e=>{let Z=e,{tone:l,required:o,form:u,isNameEditable:t,useSystemOnly:m,accept:i="*",limit:p=1,showInitValidation:a,onChange:d,onValidate:v,onValidateDelay:I,onUpdateValue:J,onUpdateValidValue:K,onUserAction:W,value:s=[],className:F,cellStyles:B,cellClassName:w,componentId:N,status_id:X,enableFormSubmit:oe,xcss:P,wrapStyles:$}=Z,O=G(Z,["tone","required","form","isNameEditable","useSystemOnly","accept","limit","showInitValidation","onChange","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","className","cellStyles","cellClassName","componentId","status_id","enableFormSubmit","xcss","wrapStyles"]),[T,A]=Q(le.DefaultStatus(e.componentId||"",s)),ie={rootStates:e,val_status:T,set_status:A};Y(()=>{ee.set({["AddFiles-"+T.componentId]:x=>{A(D=>{let C=D.rawValue,V=[];for(var g=0;g<(x==null?void 0:x.length);g++){let S=x[g],{type:E,name:z}=S;if(g+1+C.length>p){j.add({componentId:z,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u9078\u629E\u4E0A\u9650\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${z}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}if(i&&i=="image"&&!E.match(/image/)){j.add({componentId:z,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u304C\u7570\u306A\u308B\u305F\u3081\u3001${z} \u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}V.push(S)}return f(r({},D),{rawValue:[...C,...V],eventType:"update",eventID:b(12),isInspected:!1})})}})},[]),le.CommonEffects({type:"file",states:e,val_status:T,set_status:A,SystemValidation:ge});let U="";return i&&(i=="image"?U="image/png,image/jpeg":U=i),c(me,{val_status:T,set_status:A,states:e,children:[n(h,f(r({htmlTag:"input",type:"file",className:y("Input"),"data-component-id":T.componentId,accept:U,multiple:p!=1,onChange:x=>H(void 0,null,function*(){d&&d(x);let D=x.target,C=D.files,V=[];for(var g=0;g<(C==null?void 0:C.length);g++){if(!C[g])continue;let S=C[g].clone(),E=S.name;if(S.id=b(),g+1+T.rawValue.length>p){j.add({componentId:E,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u767B\u9332\u6570\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${E}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002`,backgroundColor:"nega"});continue}V.push(S)}A(S=>f(r({},S),{rawValue:[...S.rawValue,...V],eventType:"update",eventID:b(12),isInspected:!1})),D.value=""})},O),{opacity:"low",tabIndex:-1,value:""})),n(ae.List,r({},ie))]})},q=e=>(e=f(r({limit:1,isNameEditable:!0,useSystemOnly:!1,tone:"border",value:[]},e),{override:"force",cellStyles:r(r({},ce({tone:e.tone||"border"})),e.cellStyles)}),n(ue,{componentId:e.componentId,children:ye,states:e}));q.fn={openDialog:e=>{let{multiple:l,accept:o}=e,u=b();const t=document.createElement("input");t.type="file",t.multiple=!!l,t.value="",t.id=u,o&&(o=="image"?t.accept="image/png,image/jpeg,image/jpg,image/webp":t.accept=o),_("body").append(t),t.onchange=m=>{var a;let i=((a=m==null?void 0:m.target)==null?void 0:a.files)||[];if(!(i!=null&&i.length))return;let p=[];for(let d=0;d<i.length;d++){let I=i[d].clone();p.push(I)}e.onChange(p),_("#"+u).remove()},t.oncancel=()=>{_("#"+u).remove()},t.click()}},typeof window!="undefined"&&window.document&&_(document).onEvent("dragover",e=>{e.preventDefault(),k("."+y("AddButton")).addClass(y("Draggable"))},{passive:!1}).onEvent("drop",e=>{e.preventDefault(),k("."+y("AddButton")).removeClass(y("Draggable"));let l=e.dataTransfer.files;if(l.length){let o=e.target;if(k(o).hasClass(y("AddButton"))){let{componentId:u}=o.dataset,t=ee.get("AddFiles-"+u);t&&t(l)}}},{passive:!1});export{q as Filer,q as default};
|
package/dist/index.d.ts
CHANGED