amotify 0.3.18 → 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/demo/next/package.json +1 -1
- package/dist/@utils/color.d.ts +1 -0
- package/dist/fn/Cropper.js +1 -1
- package/dist/fn/DataGrid/index.d.ts +2 -2
- package/dist/fn/DataGrid/index.js +1 -1
- package/dist/fn/Input/Filer.js +1 -1
- package/dist/fn/Input/Switch.js +1 -1
- package/dist/fn/Table/Data.js +1 -1
- package/dist/index.d.ts +1 -0
- package/package.json +2 -2
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/demo/next/package.json
CHANGED
package/dist/@utils/color.d.ts
CHANGED
package/dist/fn/Cropper.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as K,c as ne,e as V}from"../chunk-C5N2D3ZX.js";import{Fragment as Ce,jsx as o,jsxs as p}from"react/jsx-runtime";import v,{Filer as he,UUID as me,useStore as q}from"jmini";import{$$fromRoot as le}from"../@utils";import{useState as X,useEffect as ee}from"react";import{Box as A,FAI as z,Column as J,FlexMargin as pe}from"../atoms";import{Row as M,Literal as w}from"../mols";import{Button as W}from"./Button";import N from"./Sheet";import te from"./Loader";import ae from"./Input";import{faPalette as ue}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as ge}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as fe}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as de}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as O}from"../@styles/componentClasses";import j from"./Tooltips";class ve{constructor(e){this.set_scale=e.set_scale,this.val_file=e.val_file,this.develops=e.develops;{let[h,l]=v.isArray(e.use)&&e.use||e.use.split(":").map(r=>Number(r)),m=h/l;this.usage={w:h,h:l,aspect:m}}this.componentId=e.componentId;let c=e.canvas,t=e.picture.image;this.Canvas={elm:c,ctx:c.getContext("2d")};let{width:a,height:i}=t,n=a/i;this.Picture={elm:t,originDataUrl:t.src,aspect:n,revisedAspect:1,rotate:e.picture.rotate,grayScale:e.picture.grayScale,tone:e.picture.tone},this.scale={current:e.scale.default,default:e.scale.default,min:e.scale.min,max:e.scale.max},this.usage.aspect<this.Picture.aspect?this.scale.min=100/n*this.usage.aspect:this.scale.min=100*n/this.usage.aspect,this.pst={frame:{x:0,y:0,w:0,h:0,aspect:1},outImage:{x:0,y:0,w:0,h:0},imageX:a/2,imageY:i/2,centerX:0,centerY:0},this.dragEffectInfo={origin:{x:0,y:0},frameExpandRate:{x:0,y:0}},this.pinchEffectInfo={origin:{x:0,y:0,scale:this.scale.current}},this.frameSizing(),this.modifyImage()}frameSizing(){let e=this.Canvas.elm,c=this.Picture.elm,t=0,a=0;{if(this.usage.aspect==1){let s=e.width*.6666666666666666,C=e.height*(2/3);a=t=Math.min(s,C)}else this.usage.aspect>1?(t=e.width*.9,a=t/this.usage.aspect):(a=e.height*.9,t=a*this.usage.aspect);let r=.85;a>e.height*r&&(a=e.height*r,t=a*this.usage.aspect),t>e.width*r&&(t=e.width*r,a=t/this.usage.aspect)}let{width:i,height:n}=c,h=(e.width-t)/2,l=(e.height-a)/2,m=t/a;this.pst={frame:{x:h,y:l,w:t,h:a,aspect:m},outImage:{x:0,y:0,w:0,h:0},imageX:i/2,imageY:n/2,centerX:e.width/2,centerY:e.height/2}}dragEffect(e){let{eventType:c,x:t,y:a}=e;if(c=="start"){let i=this.Canvas.elm.position();this.dragEffectInfo={origin:{x:t,y:a},frameExpandRate:{x:this.Canvas.elm.width/i.width,y:this.Canvas.elm.height/i.height}}}else{let{origin:i,frameExpandRate:n}=this.dragEffectInfo,h=i.x-t,l=i.y-a,m=this.scale.current*this.Picture.revisedAspect/100,r=h/m*n.x,s=l/m*n.y;c=="move"?this.drawImage(this.pst.imageX+r,this.pst.imageY+s):c=="end"&&this.drawImage(this.pst.imageX+=r,this.pst.imageY+=s)}}pinchEffect(e){let{eventType:c,event:t}=e,{x:a,y:i}=v.getCursor(t.touches[0]),{x:n,y:h}=v.getCursor(t.touches[1]),l=n-a,m=h-i;if(c=="start")this.pinchEffectInfo.origin={x:l,y:m,scale:this.scale.current};else if(c=="move"){let{origin:r}=this.pinchEffectInfo,s=Math.sqrt(Math.pow(r.x,2)+Math.pow(r.y,2)),x=Math.sqrt(Math.pow(l,2)+Math.pow(m,2))/s,f=Number(r.scale*x);this.set_scale(f)}}updateScale(e){let c=e;c=Math.max(c,this.scale.min),c=Math.min(c,this.scale.max),this.scale.current=c,this.drawImage()}updateFilter(e){this.Picture.grayScale=e.grayScale,this.Picture.tone=e.tone,this.Picture.rotate=e.rotate,this.modifyImage()}modifyImage(){return V(this,null,function*(){let{grayScale:e,tone:c,rotate:t}=this.Picture;const a=document.createElement("canvas");let i=a.getContext("2d"),n=yield v.ImageLoader(this.Picture.originDataUrl),h=n.width,l=n.height;(t==90||t==270)&&(h=n.height,l=n.width),a.width=h,a.height=l,e&&(i.filter="grayscale("+e+"%)"),t&&(i.translate(h/2,l/2),i.rotate(t*Math.PI/180),v.isOneOf(t,90,270)?i.translate(-l/2,-h/2):i.translate(-h/2,-l/2)),i.drawImage(n,0,0,n.width,n.height);let m=i.getImageData(0,0,a.width,a.height),r=m.data;{e/=100;let f=[[255,255,255],[255,200,100],[170,170,255],[240,200,145],[128,255,255],[255,128,255],[255,255,128],[128,158,169],[128,112,162],[50,192,87],[246,100,140]][c],y=f[0]/255,d=f[1]/255,R=f[2]/255;for(let S=0;S<l;S++)for(let b=0;b<h;b++){var s=(S*h+b)*4;if(e){let D=.3*r[s]+.59*r[s+1]+.11*r[s+2];for(var C=0;C<3;C++){let E=r[s+C];r[s+C]=E+(D-E)*e}}r[s]*=y,r[s+1]*=d,r[s+2]*=R}}i.putImageData(m,0,0);let x=a.toDataURL("image/jpeg");{let f=yield v.ImageLoader(x),{width:y,height:d}=f,R=y/d;this.Picture=ne(K({},this.Picture),{elm:f,aspect:R,revisedAspect:this.pst.frame.aspect>R?this.pst.frame.w/y:this.pst.frame.h/d})}this.drawImage()})}drawImage(e,c){let{Canvas:{ctx:t,elm:a},pst:{frame:i}}=this;t.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height);let n=e||this.pst.imageX,h=c||this.pst.imageY;{let l=this.scale.current/100,m=this.Picture.revisedAspect*l,r=this.pst.centerX-n*m,s=this.pst.centerY-h*m,C=this.Picture.elm.width*m,x=this.Picture.elm.height*m,f=0,y=0;this.usage.aspect<this.Picture.aspect?(f=C,y=f/this.usage.aspect):(y=x,f=y*this.usage.aspect);{let d=this.pst.frame.x-(C-f)/2,R=this.pst.frame.x+this.pst.frame.w-(C+f)/2,S=this.pst.frame.y-(x-y)/2,b=this.pst.frame.y+this.pst.frame.h-(x+y)/2,D=0;r<R&&(D=r-R),r>d&&(D=r-d);let E=0;s<b&&(E=s-b),s>S&&(E=s-S),this.dragEffectInfo.origin.x+=D/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=E/2/this.dragEffectInfo.frameExpandRate.y,r=Math.min(Math.max(r,R),d),s=Math.min(Math.max(s,b),S)}this.pst.outImage={x:r,y:s,w:C,h:x};{let d=1;t.lineWidth=d,t.strokeStyle="#ffffff66",t.strokeRect(r+(C-f)/2-d,s+(x-y)/2-d,f+d*2,y+d*2)}t.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,r,s,C,x)}{if(this.usage.aspect==1){t.fillStyle="rgba( 20,24,20,.5 )",t.beginPath();let l=a.width/3*2,m=a.height/3*2,r=Math.min(l,m),s=Math.max(l,m);t.arc(a.width/2,a.height/2,s*1.41,0,Math.PI*2,!0),t.arc(a.width/2,a.height/2,r/2,0,Math.PI*2,!1),t.closePath(),t.fill()}else t.fillStyle="rgba( 20,24,20,.5 )";{let m=v(document.body).getStyleProperty("--color-theme-hsl"),r=2;t.lineWidth=r,t.strokeStyle=`hsla( ${m},1 )`,t.strokeRect(i.x-r,i.y-r,i.w+r*2,i.h+r*2)}}}export(){return V(this,null,function*(){let{Canvas:e,develops:c,Picture:t,pst:{outImage:a,frame:i}}=this,n=a.w/t.elm.width,h=a.h/t.elm.height,l=(i.x-a.x)/n,m=i.w/n,r=(i.y-a.y)/h,s=i.h/h,C=Array.from({length:c.length}),x="image/jpeg";for(let f=0;f<c.length;f++){let{size:y,maxSize:d}=c[f];d=d||{S:1024*20,R:1024*100,L:1024*350}[y];let R={S:140,R:600,L:1200}[y],S=document.createElement("canvas");S.width=m,S.height=s;let b=document.createElement("canvas");b.width=R,b.height=R/this.usage.aspect;let D=S.getContext("2d");if(!D)return;let E=b.getContext("2d");if(!E)return;D.clearRect(0,0,S.width,S.height),D.drawImage(this.Picture.elm,l,r,m,s,0,0,m,s),E.fillStyle="black",E.drawImage(S,0,0,S.width,S.height,0,0,b.width,b.height);let Z=b.toDataURL(x),H=yield Z.toBlob(x);if(!H)return;if(H.size>=d){let ie=d/H.size;if(Z=b.toDataURL(x,ie*.92),H=yield Z.toBlob(x),!H)return}let re=new File([H],this.val_file.name,{type:x});C[f]=re}return C})}}const se={Core:u=>{let{val_file:e,options:c,finishedCallback:t,abortCallback:a}=u,{use:i,develops:n=[]}=c,[h]=X(me());const l={scale:{default:120,min:50,max:300},rotate:0,grayScale:0,tone:0};let m=2048*2048,r=1024,[s,C]=X("init"),[x,f]=X(""),[y,d]=X(l.scale.default),[R,S]=X(l.rotate),[b,D]=X(l.grayScale),[E,Z]=X(l.tone),[H,re]=X(-1),[ie,ce]=X(-1);return ee(()=>{let g="CropperResize";return v(window).onEvent("resize",()=>{v.interval.once(()=>{var $;let I=le("#Canvas-"+h)[0];if(!I)return;let B=($=q.get(h))==null?void 0:$.Instance;if(!B)return;let F=I.position(),U=F.width/F.height,Y=r,k=Y/U;if(Y*k>m){let G=Y*k/m;Y=Math.floor(Y/Math.sqrt(G)),k=Math.floor(k/Math.sqrt(G))}I.width=r,I.height=k;let{width:P,height:Q}=I;B.pst.centerX=P/2,B.pst.centerY=Q/2,B.frameSizing(),B.modifyImage()},250,"CropperResize")},{eventID:g}),()=>{v(window).removeEvent(g)}},[]),ee(()=>{q.set({[h]:{}}),V(void 0,null,function*(){try{let g=le("#Canvas-"+h)[0];if(!g)return;let I=g.position(),B=I.width/I.height,F=r,U=F/B;if(F*U>m){let _=F*U/m;F=Math.floor(F/Math.sqrt(_)),U=Math.floor(U/Math.sqrt(_))}g.width=F,g.height=U;let Y=he(e),k=yield v.ImageLoader(yield Y.toObjectURL());re(k.width),ce(k.height);let P=new ve({set_scale:d,val_file:e,develops:n,use:i,scale:l.scale,componentId:h,canvas:g,picture:{image:k,grayScale:l.grayScale,tone:l.tone,rotate:l.rotate}});q.set({[h]:{Instance:P}});const Q=function(_){if(_.preventDefault(),_.touches&&_.touches.length>1)P.pinchEffect({eventType:"start",event:_}),v(document).onEvent("touchmove",L=>{L.preventDefault(),P.pinchEffect({eventType:"move",event:L})},{eventID:"CropperEffectMove",passive:!1}).onEvent("touchend",G,{eventID:"CropperEffectEnd",passive:!1});else{P.dragEffect(K({eventType:"start"},v.getCursor(_)));let{type:L}=_;v(document).onEvent(L=="touchstart"?"touchmove":"mousemove",T=>{$("move",T)},{eventID:"CropperEffectMove",passive:!1}).onEvent(L=="touchstart"?"touchend":"mouseup",T=>{$("end",T),G(T)},{eventID:"CropperEffectEnd",passive:!1})}},$=function(_,L){L.preventDefault(),P.dragEffect(K({eventType:_},v.getCursor(L)))},G=function(_){_.preventDefault(),v(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};v(g).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).onEvent("wheel",_=>{_.preventDefault();let L=Number(_.wheelDelta*.04),T=P.scale.current+L;T=Math.max(T,P.scale.min),T=Math.min(T,P.scale.max),d(T)},{eventID:"CropperMouseWheel",passive:!1}).onEvent("touchstart",Q,{eventID:"CropperTouchStart",passive:!1}).onEvent("mousedown",Q,{eventID:"CropperMouseDown",passive:!1}),yield v.pending(1e3),C("ok")}catch(g){C("error"),f((g==null?void 0:g.message)||v.Stringify(g)),console.error(g)}})},[e.id]),ee(()=>{var I;let g=(I=q.get(h))==null?void 0:I.Instance;g&&g.updateScale(y)},[y]),ee(()=>{var I;let g=(I=q.get(h))==null?void 0:I.Instance;g&&g.updateFilter({grayScale:b,tone:E,rotate:R})},[b,E,R]),o(N.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:p(J,{className:[O("Wrap"),O("Use_"+i)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[p(A,{position:"absolute",ssZIndex:2,top:"50%",left:"50%",flexCenter:!0,xcss:{transform:"translate( -50%,-50% )",pointerEvents:"none"},children:[s=="init"&&o(te.Theme.XL,{showInitial:!0}),s=="error"&&p(w.Mini,{fontColor:"nega",children:["\u753B\u50CF\u306E\u8AAD\u307F\u8FBC\u307F\u306B\u5931\u6557\u3057\u307E\u3057\u305F",o(w.Description,{children:x})]})]}),p(A,{flexSizing:0,overflow:"hidden",ssZIndex:1,flexCenter:!0,paddingBottom:6,xcss:{backgroundColor:"#000f0f"},children:[o("canvas",{style:{width:"100%",height:"100%"},width:r,height:r,className:O("Canvas"),id:"Canvas-"+h}),o(w.Mini,{position:"absolute",bottom:1,left:1,right:1,ssCardBox:"plain",boxShadow:"0.max",padding:1,backgroundColor:"layer.0.opa.few",xcss:{backdropFilter:"blur(6px)"},children:p(J,{gap:"1/2",children:[p(M.Left,{gap:"1/2",flexWrap:!0,fontColor:"white",fontSize:"0.xs",fontHeight:1.2,children:[p(w,{children:["[",e.type,"]"]}),o(w,{children:e.name}),p(w,{children:[H,"px x ",ie,"px"]}),p(w,{children:["[",e.size.rank(),"B]"]})]}),p(M.Left,{gap:"1/2",verticalAlign:"unset",flexWrap:!0,children:[o(se.SettingRegion,{DefaultOptions:l,val_scale:y,set_scale:d,val_tone:E,set_tone:Z,val_grayScale:b,set_grayScale:D,val_rotate:R,set_rotate:S}),o(pe,{}),o(W.Border.S,{onClick:()=>{a()},children:"\u9589\u3058\u308B"}),o(W.Prime.S,{boxShadow:"3.remark",onClick:()=>V(void 0,null,function*(){var B;let g=(B=q.get(h))==null?void 0:B.Instance;if(!g)return;te.fn.mini.active("CropperExportation");let I=yield g.export();setTimeout(()=>{te.fn.mini.stop("CropperExportation"),t(I)},1e3)}),children:p(M.Center,{gap:"1/2",children:[o(te.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})})]})]})})},SettingRegion:u=>{let e=["","\u6696\u8272","\u5BD2\u8272","\u30BB\u30D4\u30A2","\u30B7\u30A2\u30F3","\u30DE\u30BC\u30F3\u30BF","\u30A4\u30A8\u30ED\u30FC","\u30AA\u30EA\u30B8\u30CA\u30EB1","\u30AA\u30EA\u30B8\u30CA\u30EB2","\u30AA\u30EA\u30B8\u30CA\u30EB3","\u30AA\u30EA\u30B8\u30CA\u30EB4"],c=t=>e[t]||"\u306A\u3057";return p(Ce,{children:[p(M.Center,{gap:"1/6",children:[p(W.Border.S,{flexCenter:!0,gap:"1/4",border:"unset",borderTopRightRadius:0,borderBottomRightRadius:0,onClick:()=>{let t=u.val_rotate-90;t<0&&(t+=360),u.set_rotate(t)},children:[o(w,{children:"90\xB0"}),o(z,{icon:fe,fontColor:"4.thin"})]}),p(W.Border.S,{flexCenter:!0,gap:"1/4",border:"unset",borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{u.set_rotate((u.val_rotate+90)%360)},children:[o(z,{icon:de,fontColor:"4.thin"}),o(w,{children:"90\xB0"})]})]}),p(W.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperZoomEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,xcss:{minWidth:12*26},content:o(N.Body,{children:p(J,{padding:1.5,children:[p(M.Separate,{children:[o(w.Paragraph,{children:p(M.Center,{gap:"1/2",children:[o(z.Search,{fontColor:"5.translucent"}),"Zoom"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(z.X,{})})]}),o(A,{borderBottom:!0,opacity:"low"}),o(ae.Slider,{override:"force",value:u.val_scale-u.DefaultOptions.scale.min,min:u.DefaultOptions.scale.min-100,max:u.DefaultOptions.scale.max-100,step:25,onUpdateValidValue:(i,n)=>{v.interval.once(()=>{u.set_scale(i+100)},250,"Cropper.UpdateScale")},onLegendRender:i=>"x"+Math.round(100+i)/100})]})})})},children:[o(w.Micro,{fontColor:"4.thin",children:"Zoom"}),p(w,{unitWidth:4,children:[u.val_scale.rate(1,0),"%"]})]}),p(W.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperGrayScaleEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,xcss:{minWidth:12*26},content:o(N.Body,{children:p(J,{padding:1.5,children:[p(M.Separate,{children:[o(w.Paragraph,{children:p(M.Center,{gap:"1/2",children:[o(z,{icon:ue,fontColor:"5.translucent"}),"Gray Scale"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(z.X,{})})]}),o(A,{borderBottom:!0,opacity:"low"}),o(ae.Slider,{value:u.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:i=>{v.interval.once(()=>{u.set_grayScale(i)},250,"Cropper.GrayScale")},onLegendRender:i=>i+"%"})]})})})},children:[o(w.Micro,{fontColor:"4.thin",children:"GrayScale"}),p(w,{children:[u.val_grayScale.rate(1,0),"%"]})]}),p(W.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperToneEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,xcss:{minWidth:12*26,maxWidth:12*24},content:()=>{let i=[];for(let n=1;n<=10;n++)i.push({value:n,label:p(M.Left,{gap:"1/3",children:[o(A,{ssSphere:1,className:[O("ToneBall"),O("ToneBall_"+n)].join(" ")}),o(A,{textAlign:"left",flexSizing:0,children:c(n)})]})});return o(N.Body,{children:p(J,{padding:1.5,children:[p(M.Separate,{children:[o(w.Paragraph,{children:p(M.Center,{gap:"1/2",children:[o(z,{icon:ge,fontColor:"5.translucent"}),"Tone"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(z.X,{})})]}),o(A,{borderBottom:!0,opacity:"low"}),o(ae.Radio.Normal,{value:u.val_tone,gap:"1/2",cellStyles:{fontColor:"3.blur"},options:[{value:0,label:o(A,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...i],onUpdateValidValue:n=>{u.set_tone(n)}})]})})}})},children:[o(w.Micro,{fontColor:"4.thin",children:"Tone"}),o(A,{boxShadow:"2.remark",ssSphere:1,className:[O("ToneBall"),O("ToneBall_"+u.val_tone)].join(" ")}),c(u.val_tone)]})]})}},oe={openDialogNEdit:u=>{ae.Filer.fn.openDialog({accept:"image",multiple:!1,onChange:e=>{oe.openEditor(K({imageFile:e[0]},u))}})},openEditor:u=>V(void 0,null,function*(){let e="CropperImage";N.open("middleCenter",{sheetID:e,size:"MAX",padding:0,margin:0,xcss:{maxWidth:"100%"},content:o(se.Core,{val_file:u.imageFile,options:u,finishedCallback:c=>{N.close(e),u.onProcessFinished(c)},abortCallback:()=>{N.close(e)}}),closeAtEscapeKeyDown:!1})})};export{oe as Cropper,oe as default};
|
|
1
|
+
import{b as K,c as ne,e as V}from"../chunk-C5N2D3ZX.js";import{Fragment as Ce,jsx as o,jsxs as p}from"react/jsx-runtime";import v,{Filer as he,UUID as me,useStore as q}from"jmini";import{$$fromRoot as le}from"../@utils";import{useState as X,useEffect as ee}from"react";import{Box as A,FAI as z,Column as J,FlexMargin as pe}from"../atoms";import{Row as M,Literal as w}from"../mols";import{Button as W}from"./Button";import N from"./Sheet";import te from"./Loader";import ae from"./Input";import{faPalette as ue}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as ge}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as fe}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as de}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as O}from"../@styles/componentClasses";import j from"./Tooltips";class ve{constructor(e){this.set_scale=e.set_scale,this.val_file=e.val_file,this.develops=e.develops;{let[h,l]=v.isArray(e.use)&&e.use||e.use.split(":").map(r=>Number(r)),m=h/l;this.usage={w:h,h:l,aspect:m}}this.componentId=e.componentId;let c=e.canvas,t=e.picture.image;this.Canvas={elm:c,ctx:c.getContext("2d")};let{width:a,height:i}=t,n=a/i;this.Picture={elm:t,originDataUrl:t.src,aspect:n,revisedAspect:1,rotate:e.picture.rotate,grayScale:e.picture.grayScale,tone:e.picture.tone},this.scale={current:e.scale.default,default:e.scale.default,min:e.scale.min,max:e.scale.max},this.usage.aspect<this.Picture.aspect?this.scale.min=100/n*this.usage.aspect:this.scale.min=100*n/this.usage.aspect,this.pst={frame:{x:0,y:0,w:0,h:0,aspect:1},outImage:{x:0,y:0,w:0,h:0},imageX:a/2,imageY:i/2,centerX:0,centerY:0},this.dragEffectInfo={origin:{x:0,y:0},frameExpandRate:{x:0,y:0}},this.pinchEffectInfo={origin:{x:0,y:0,scale:this.scale.current}},this.frameSizing(),this.modifyImage()}frameSizing(){let e=this.Canvas.elm,c=this.Picture.elm,t=0,a=0;{if(this.usage.aspect==1){let s=e.width*.6666666666666666,C=e.height*(2/3);a=t=Math.min(s,C)}else this.usage.aspect>1?(t=e.width*.9,a=t/this.usage.aspect):(a=e.height*.9,t=a*this.usage.aspect);let r=.85;a>e.height*r&&(a=e.height*r,t=a*this.usage.aspect),t>e.width*r&&(t=e.width*r,a=t/this.usage.aspect)}let{width:i,height:n}=c,h=(e.width-t)/2,l=(e.height-a)/2,m=t/a;this.pst={frame:{x:h,y:l,w:t,h:a,aspect:m},outImage:{x:0,y:0,w:0,h:0},imageX:i/2,imageY:n/2,centerX:e.width/2,centerY:e.height/2}}dragEffect(e){let{eventType:c,x:t,y:a}=e;if(c=="start"){let i=this.Canvas.elm.position();this.dragEffectInfo={origin:{x:t,y:a},frameExpandRate:{x:this.Canvas.elm.width/i.width,y:this.Canvas.elm.height/i.height}}}else{let{origin:i,frameExpandRate:n}=this.dragEffectInfo,h=i.x-t,l=i.y-a,m=this.scale.current*this.Picture.revisedAspect/100,r=h/m*n.x,s=l/m*n.y;c=="move"?this.drawImage(this.pst.imageX+r,this.pst.imageY+s):c=="end"&&this.drawImage(this.pst.imageX+=r,this.pst.imageY+=s)}}pinchEffect(e){let{eventType:c,event:t}=e,{x:a,y:i}=v.getCursor(t.touches[0]),{x:n,y:h}=v.getCursor(t.touches[1]),l=n-a,m=h-i;if(c=="start")this.pinchEffectInfo.origin={x:l,y:m,scale:this.scale.current};else if(c=="move"){let{origin:r}=this.pinchEffectInfo,s=Math.sqrt(Math.pow(r.x,2)+Math.pow(r.y,2)),x=Math.sqrt(Math.pow(l,2)+Math.pow(m,2))/s,f=Number(r.scale*x);this.set_scale(f)}}updateScale(e){let c=e;c=Math.max(c,this.scale.min),c=Math.min(c,this.scale.max),this.scale.current=c,this.drawImage()}updateFilter(e){this.Picture.grayScale=e.grayScale,this.Picture.tone=e.tone,this.Picture.rotate=e.rotate,this.modifyImage()}modifyImage(){return V(this,null,function*(){let{grayScale:e,tone:c,rotate:t}=this.Picture;const a=document.createElement("canvas");let i=a.getContext("2d"),n=yield v.ImageLoader(this.Picture.originDataUrl),h=n.width,l=n.height;(t==90||t==270)&&(h=n.height,l=n.width),a.width=h,a.height=l,e&&(i.filter="grayscale("+e+"%)"),t&&(i.translate(h/2,l/2),i.rotate(t*Math.PI/180),v.isOneOf(t,90,270)?i.translate(-l/2,-h/2):i.translate(-h/2,-l/2)),i.drawImage(n,0,0,n.width,n.height);let m=i.getImageData(0,0,a.width,a.height),r=m.data;{e/=100;let f=[[255,255,255],[255,200,100],[170,170,255],[240,200,145],[128,255,255],[255,128,255],[255,255,128],[128,158,169],[128,112,162],[50,192,87],[246,100,140]][c],y=f[0]/255,d=f[1]/255,_=f[2]/255;for(let S=0;S<l;S++)for(let b=0;b<h;b++){var s=(S*h+b)*4;if(e){let D=.3*r[s]+.59*r[s+1]+.11*r[s+2];for(var C=0;C<3;C++){let E=r[s+C];r[s+C]=E+(D-E)*e}}r[s]*=y,r[s+1]*=d,r[s+2]*=_}}i.putImageData(m,0,0);let x=a.toDataURL("image/jpeg");{let f=yield v.ImageLoader(x),{width:y,height:d}=f,_=y/d;this.Picture=ne(K({},this.Picture),{elm:f,aspect:_,revisedAspect:this.pst.frame.aspect>_?this.pst.frame.w/y:this.pst.frame.h/d})}this.drawImage()})}drawImage(e,c){let{Canvas:{ctx:t,elm:a},pst:{frame:i}}=this;t.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height);let n=e||this.pst.imageX,h=c||this.pst.imageY;{let l=this.scale.current/100,m=this.Picture.revisedAspect*l,r=this.pst.centerX-n*m,s=this.pst.centerY-h*m,C=this.Picture.elm.width*m,x=this.Picture.elm.height*m,f=0,y=0;this.usage.aspect<this.Picture.aspect?(f=C,y=f/this.usage.aspect):(y=x,f=y*this.usage.aspect);{let d=this.pst.frame.x-(C-f)/2,_=this.pst.frame.x+this.pst.frame.w-(C+f)/2,S=this.pst.frame.y-(x-y)/2,b=this.pst.frame.y+this.pst.frame.h-(x+y)/2,D=0;r<_&&(D=r-_),r>d&&(D=r-d);let E=0;s<b&&(E=s-b),s>S&&(E=s-S),this.dragEffectInfo.origin.x+=D/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=E/2/this.dragEffectInfo.frameExpandRate.y,r=Math.min(Math.max(r,_),d),s=Math.min(Math.max(s,b),S)}this.pst.outImage={x:r,y:s,w:C,h:x};{let d=1;t.lineWidth=d,t.strokeStyle="#ffffff66",t.strokeRect(r+(C-f)/2-d,s+(x-y)/2-d,f+d*2,y+d*2)}t.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,r,s,C,x)}{if(this.usage.aspect==1){t.fillStyle="rgba( 20,24,20,.5 )",t.beginPath();let l=a.width/3*2,m=a.height/3*2,r=Math.min(l,m),s=Math.max(l,m);t.arc(a.width/2,a.height/2,s*1.41,0,Math.PI*2,!0),t.arc(a.width/2,a.height/2,r/2,0,Math.PI*2,!1),t.closePath(),t.fill()}else t.fillStyle="rgba( 20,24,20,.5 )";{let m=v(document.body).getStyleProperty("--color-theme-hsl"),r=2;t.lineWidth=r,t.strokeStyle=`hsla( ${m},1 )`,t.strokeRect(i.x-r,i.y-r,i.w+r*2,i.h+r*2)}}}export(){return V(this,null,function*(){let{Canvas:e,develops:c,Picture:t,pst:{outImage:a,frame:i}}=this,n=a.w/t.elm.width,h=a.h/t.elm.height,l=(i.x-a.x)/n,m=i.w/n,r=(i.y-a.y)/h,s=i.h/h,C=Array.from({length:c.length}),x="image/jpeg";for(let f=0;f<c.length;f++){let{size:y,maxSize:d}=c[f];d=d||{S:1024*20,R:1024*100,L:1024*350}[y];let _={S:140,R:600,L:1200}[y],S=document.createElement("canvas");S.width=m,S.height=s;let b=document.createElement("canvas");b.width=_,b.height=_/this.usage.aspect;let D=S.getContext("2d");if(!D)return;let E=b.getContext("2d");if(!E)return;D.clearRect(0,0,S.width,S.height),D.drawImage(this.Picture.elm,l,r,m,s,0,0,m,s),E.fillStyle="black",E.drawImage(S,0,0,S.width,S.height,0,0,b.width,b.height);let Z=b.toDataURL(x),H=yield Z.toBlob(x);if(!H)return;if(H.size>=d){let ie=d/H.size;if(Z=b.toDataURL(x,ie*.92),H=yield Z.toBlob(x),!H)return}let re=new File([H],this.val_file.name,{type:x});C[f]=re}return C})}}const se={Core:u=>{let{val_file:e,options:c,finishedCallback:t,abortCallback:a}=u,{use:i,develops:n=[]}=c,[h]=X(me());const l={scale:{default:120,min:50,max:300},rotate:0,grayScale:0,tone:0};let m=2048*2048,r=1024,[s,C]=X("init"),[x,f]=X(""),[y,d]=X(l.scale.default),[_,S]=X(l.rotate),[b,D]=X(l.grayScale),[E,Z]=X(l.tone),[H,re]=X(-1),[ie,ce]=X(-1);return ee(()=>{let g="CropperResize";return v(window).onEvent("resize",()=>{v.interval.once(()=>{var $;let I=le("#Canvas-"+h)[0];if(!I)return;let B=($=q.get(h))==null?void 0:$.Instance;if(!B)return;let F=I.position(),U=F.width/F.height,Y=r,k=Y/U;if(Y*k>m){let G=Y*k/m;Y=Math.floor(Y/Math.sqrt(G)),k=Math.floor(k/Math.sqrt(G))}I.width=r,I.height=k;let{width:P,height:Q}=I;B.pst.centerX=P/2,B.pst.centerY=Q/2,B.frameSizing(),B.modifyImage()},250,"CropperResize")},{eventID:g}),()=>{v(window).removeEvent(g)}},[]),ee(()=>{q.set({[h]:{}}),V(void 0,null,function*(){try{let g=le("#Canvas-"+h)[0];if(!g)return;let I=g.position(),B=I.width/I.height,F=r,U=F/B;if(F*U>m){let R=F*U/m;F=Math.floor(F/Math.sqrt(R)),U=Math.floor(U/Math.sqrt(R))}g.width=F,g.height=U;let Y=he(e),k=yield v.ImageLoader(yield Y.toObjectURL());re(k.width),ce(k.height);let P=new ve({set_scale:d,val_file:e,develops:n,use:i,scale:l.scale,componentId:h,canvas:g,picture:{image:k,grayScale:l.grayScale,tone:l.tone,rotate:l.rotate}});q.set({[h]:{Instance:P}});const Q=function(R){if(R.preventDefault(),R.touches&&R.touches.length>1)P.pinchEffect({eventType:"start",event:R}),v(document).onEvent("touchmove",L=>{L.preventDefault(),P.pinchEffect({eventType:"move",event:L})},{eventID:"CropperEffectMove",passive:!1}).onEvent("touchend",G,{eventID:"CropperEffectEnd",passive:!1});else{P.dragEffect(K({eventType:"start"},v.getCursor(R)));let{type:L}=R;v(document).onEvent(L=="touchstart"?"touchmove":"mousemove",T=>{$("move",T)},{eventID:"CropperEffectMove",passive:!1}).onEvent(L=="touchstart"?"touchend":"mouseup",T=>{$("end",T),G(T)},{eventID:"CropperEffectEnd",passive:!1})}},$=function(R,L){L.preventDefault(),P.dragEffect(K({eventType:R},v.getCursor(L)))},G=function(R){R.preventDefault(),v(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};v(g).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).onEvent("wheel",R=>{R.preventDefault();let L=Number(R.wheelDelta*.04),T=P.scale.current+L;T=Math.max(T,P.scale.min),T=Math.min(T,P.scale.max),d(T)},{eventID:"CropperMouseWheel",passive:!1}).onEvent("touchstart",Q,{eventID:"CropperTouchStart",passive:!1}).onEvent("mousedown",Q,{eventID:"CropperMouseDown",passive:!1}),yield v.pending(1e3),C("ok")}catch(g){C("error"),f((g==null?void 0:g.message)||v.Stringify(g)),console.error(g)}})},[e.id]),ee(()=>{var I;let g=(I=q.get(h))==null?void 0:I.Instance;g&&g.updateScale(y)},[y]),ee(()=>{var I;let g=(I=q.get(h))==null?void 0:I.Instance;g&&g.updateFilter({grayScale:b,tone:E,rotate:_})},[b,E,_]),o(N.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:p(J,{className:[O("Wrap"),O("Use_"+i)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[p(A,{position:"absolute",ssZIndex:2,top:"50%",left:"50%",flexCenter:!0,xcss:{transform:"translate( -50%,-50% )",pointerEvents:"none"},children:[s=="init"&&o(te.Theme.XL,{showInitial:!0}),s=="error"&&p(w.Mini,{fontColor:"nega",children:["\u753B\u50CF\u306E\u8AAD\u307F\u8FBC\u307F\u306B\u5931\u6557\u3057\u307E\u3057\u305F",o(w.Description,{children:x})]})]}),p(A,{flexSizing:0,overflow:"hidden",ssZIndex:1,flexCenter:!0,paddingBottom:6,xcss:{backgroundColor:"#000f0f"},children:[o("canvas",{style:{width:"100%",height:"100%"},width:r,height:r,className:O("Canvas"),id:"Canvas-"+h}),o(w.Mini,{position:"absolute",bottom:1,left:1,right:1,ssCardBox:"plain",boxShadow:"0.max",padding:1,backgroundColor:"layer.0.opa.few",xcss:{backdropFilter:"blur(6px)"},children:p(J,{gap:"1/2",children:[p(M.Left,{gap:"1/2",flexWrap:!0,fontColor:"white",fontSize:"0.xs",fontHeight:1.2,children:[p(w,{children:["[",e.type,"]"]}),o(w,{children:e.name}),p(w,{children:[H,"px x ",ie,"px"]}),p(w,{children:["[",e.size.rank(),"B]"]})]}),p(M.Left,{gap:"1/2",verticalAlign:"unset",flexWrap:!0,children:[o(se.SettingRegion,{DefaultOptions:l,val_scale:y,set_scale:d,val_tone:E,set_tone:Z,val_grayScale:b,set_grayScale:D,val_rotate:_,set_rotate:S}),o(pe,{}),o(W.Border.S,{onClick:()=>{a()},children:"\u9589\u3058\u308B"}),o(W.Prime.S,{boxShadow:"3.remark",onClick:()=>V(void 0,null,function*(){var B;let g=(B=q.get(h))==null?void 0:B.Instance;if(!g)return;te.fn.mini.active("CropperExportation");let I=yield g.export();setTimeout(()=>{te.fn.mini.stop("CropperExportation"),t(I)},1e3)}),children:p(M.Center,{gap:"1/2",children:[o(te.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})})]})]})})},SettingRegion:u=>{let e=["","\u6696\u8272","\u5BD2\u8272","\u30BB\u30D4\u30A2","\u30B7\u30A2\u30F3","\u30DE\u30BC\u30F3\u30BF","\u30A4\u30A8\u30ED\u30FC","\u30AA\u30EA\u30B8\u30CA\u30EB1","\u30AA\u30EA\u30B8\u30CA\u30EB2","\u30AA\u30EA\u30B8\u30CA\u30EB3","\u30AA\u30EA\u30B8\u30CA\u30EB4"],c=t=>e[t]||"\u306A\u3057";return p(Ce,{children:[p(M.Center,{gap:"1/6",children:[p(W.Border.S,{flexCenter:!0,gap:"1/4",border:"unset",borderTopRightRadius:0,borderBottomRightRadius:0,onClick:()=>{let t=u.val_rotate-90;t<0&&(t+=360),u.set_rotate(t)},children:[o(w,{children:"90\xB0"}),o(z,{icon:fe,fontColor:"4.thin"})]}),p(W.Border.S,{flexCenter:!0,gap:"1/4",border:"unset",borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{u.set_rotate((u.val_rotate+90)%360)},children:[o(z,{icon:de,fontColor:"4.thin"}),o(w,{children:"90\xB0"})]})]}),p(W.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperZoomEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,xcss:{minWidth:12*26},content:o(N.Body,{children:p(J,{padding:1.5,children:[p(M.Separate,{children:[o(w.Paragraph,{children:p(M.Center,{gap:"1/2",children:[o(z.Search,{fontColor:"5.translucent"}),"Zoom"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(z.X,{})})]}),o(A,{borderBottom:!0,opacity:"low"}),o(ae.Slider,{override:"force",value:u.val_scale-u.DefaultOptions.scale.min,min:u.DefaultOptions.scale.min-100,max:u.DefaultOptions.scale.max-100,step:25,onUpdateValidValue:(i,n)=>{v.interval.once(()=>{u.set_scale(i+100)},250,"Cropper.UpdateScale")},onLegendRender:i=>"x"+Math.round(100+i)/100})]})})})},children:[o(w.Micro,{fontColor:"4.thin",children:"Zoom"}),p(w,{unitWidth:4,children:[u.val_scale.toRatio(1,0),"%"]})]}),p(W.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperGrayScaleEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,xcss:{minWidth:12*26},content:o(N.Body,{children:p(J,{padding:1.5,children:[p(M.Separate,{children:[o(w.Paragraph,{children:p(M.Center,{gap:"1/2",children:[o(z,{icon:ue,fontColor:"5.translucent"}),"Gray Scale"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(z.X,{})})]}),o(A,{borderBottom:!0,opacity:"low"}),o(ae.Slider,{value:u.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:i=>{v.interval.once(()=>{u.set_grayScale(i)},250,"Cropper.GrayScale")},onLegendRender:i=>i+"%"})]})})})},children:[o(w.Micro,{fontColor:"4.thin",children:"GrayScale"}),p(w,{children:[u.val_grayScale.toRatio(1,0),"%"]})]}),p(W.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperToneEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,xcss:{minWidth:12*26,maxWidth:12*24},content:()=>{let i=[];for(let n=1;n<=10;n++)i.push({value:n,label:p(M.Left,{gap:"1/3",children:[o(A,{ssSphere:1,className:[O("ToneBall"),O("ToneBall_"+n)].join(" ")}),o(A,{textAlign:"left",flexSizing:0,children:c(n)})]})});return o(N.Body,{children:p(J,{padding:1.5,children:[p(M.Separate,{children:[o(w.Paragraph,{children:p(M.Center,{gap:"1/2",children:[o(z,{icon:ge,fontColor:"5.translucent"}),"Tone"]})}),o(W.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(z.X,{})})]}),o(A,{borderBottom:!0,opacity:"low"}),o(ae.Radio.Normal,{value:u.val_tone,gap:"1/2",cellStyles:{fontColor:"3.blur"},options:[{value:0,label:o(A,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...i],onUpdateValidValue:n=>{u.set_tone(n)}})]})})}})},children:[o(w.Micro,{fontColor:"4.thin",children:"Tone"}),o(A,{boxShadow:"2.remark",ssSphere:1,className:[O("ToneBall"),O("ToneBall_"+u.val_tone)].join(" ")}),c(u.val_tone)]})]})}},oe={openDialogNEdit:u=>{ae.Filer.fn.openDialog({accept:"image",multiple:!1,onChange:e=>{oe.openEditor(K({imageFile:e[0]},u))}})},openEditor:u=>V(void 0,null,function*(){let e="CropperImage";N.open("middleCenter",{sheetID:e,size:"MAX",padding:0,margin:0,xcss:{maxWidth:"100%"},content:o(se.Core,{val_file:u.imageFile,options:u,finishedCallback:c=>{N.close(e),u.onProcessFinished(c)},abortCallback:()=>{N.close(e)}}),closeAtEscapeKeyDown:!1})})};export{oe as Cropper,oe as default};
|
|
@@ -141,10 +141,10 @@ declare namespace DataGrid {
|
|
|
141
141
|
datagridID: string;
|
|
142
142
|
totalCount?: number;
|
|
143
143
|
}>;
|
|
144
|
-
Paging: React.FC<{
|
|
144
|
+
Paging: React.FC<Omit<Input.TextField.Input, 'options'> & {
|
|
145
145
|
datagridID: string;
|
|
146
146
|
}>;
|
|
147
|
-
RowCount: React.FC<{
|
|
147
|
+
RowCount: React.FC<Omit<Input.TextField.Input, 'options'> & {
|
|
148
148
|
datagridID: string;
|
|
149
149
|
options: number[];
|
|
150
150
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as n,c as y,d as Q,e as be}from"../../chunk-C5N2D3ZX.js";import{Fragment as Be,jsx as l,jsxs as q}from"react/jsx-runtime";import p,{useStore as ne,UUID as ge}from"jmini";import me,{useState as Ie,useEffect as se}from"react";import{ExtractStyles as X,GenerateHTMLProps as xe,dragEffect as ye,useRemote as ie}from"../../@utils";import{faArrowUp as Te}from"@fortawesome/free-solid-svg-icons/faArrowUp";import{faUpDown as De}from"@fortawesome/free-solid-svg-icons/faUpDown";import{Box as k,Flex as we,FAI as G,Span as ke}from"../../atoms";import{Literal as pe,Row as W,MarkerPen as he}from"../../mols";import{Button as ce}from"../Button";import E from"../Input";import{TableClasses as Ke}from"../../@styles/componentClasses";import{faGripVertical as Se}from"@fortawesome/free-solid-svg-icons/faGripVertical";import{Tips as Ce}from"../Tips";const f={reservedKeys:["row_id","onCheckerDisabled","onDraggerDisabled","columnIdx","isSelected","isFilterMatched","isVisible","draggerIndex","onRowClick"],toSafetyHeader:t=>{let e=!!t.some(o=>o.draggable);return(t==null?void 0:t.map((o,i)=>{var a;return p.isRecord(o)||(o={key:o}),p.isString(o.key)&&(o.key=o.key.replace(/[.\s]/g,"_")),e&&(o.sortable=0,o.filterable=!1),o.columnIdx=(a=o.columnIdx)!=null?a:i,o}).toASC("columnIdx"))||[]},toSafetyBody:t=>t==null?void 0:t.map((e,r)=>{var i;let o={};return Object.entries(e).forEach(([a,c])=>{var m,s;if(p.isOneOf(a,...f.reservedKeys))return;let d=c;p.isNullish(d)||(p.isRecord(d)||(d={data:d}),p.isString(a)&&(a=a.replace(/[.\s]/g,"_")),d.sortKey=(s=(m=d.sortKey)!=null?m:String(d.data))!=null?s:"",o[a]=d)}),o=y(n({},o),{row_id:(i=e.row_id)!=null?i:r,onRowClick:e.onRowClick,isSelected:!!e.isSelected,isFilterMatched:!0,isVisible:!0,onCheckerDisabled:e.onCheckerDisabled,onDraggerDisabled:e.onDraggerDisabled,draggerIndex:r}),o}),toSafetyData:t=>{var o,i;let{header:e=[]}=t,r={datagridID:t.datagridID||ge(),sessionID:ge(),body:f.toSafetyBody(t.body||[]),filter:{keyword:t.defaultSearchKey||"",current:[]},sort:{col:-1,dir:1},paging:{rows:t.maxRows||100,total:1,current:1},draggable:!!e.some(a=>a.draggable)};{let a=e==null?void 0:e.findIndex(c=>c.defSort);a!==-1&&(r.sort.col=a,r.sort.dir=(i=(o=e[a])==null?void 0:o.sortable)!=null?i:1)}return r.draggable&&(r.sort.col=-1,r.sort.dir=0),f.updateRowMeta(r,t)},updateRowMeta:(t,e)=>{let r=n({},t);if(r.sort.col>=0&&r.sort.dir){let o=e.header[r.sort.col].key;r.sort.dir==1?r.body.toASC(o+".sortKey"):r.body.toDESC(o+".sortKey")}{let o=String(r.filter.keyword)||"";r.body.forEach(i=>{if(i.isFilterMatched=!0,!o)return;let a=e.header.some(c=>{var s;let d=i[c.key];return!d||!d.sortKey?!1:!!((s=String(d.sortKey||d.data))!=null&&s.match(new RegExp(o.escapeRegExChar(),"i")))});i.isFilterMatched=a})}{let o=r.paging.rows;r.paging.total=Math.ceil(r.body.filter(d=>d.isFilterMatched).length/o);let i=o*(r.paging.current-1),a=i+o,c=0;r.body.forEach(d=>{d.isVisible=!1,d.isFilterMatched&&(d.isVisible=c>=i&&c<a,c++)})}return r.draggable&&r.body.toASC("draggerIndex"),r},index:t=>{var s,K,H,I;let[e,r]=Ie(()=>f.toSafetyData(t));se(()=>{ne.set({["reset-"+e.datagridID]:()=>{r(f.toSafetyData(t))},["refresh-"+e.datagridID]:()=>{r(g=>f.updateRowMeta(y(n({},g),{body:f.toSafetyBody(t.body)}),t))}})},[t]),se(()=>{ne.set({["rows-"+e.datagridID]:e.body}),ie.bridge(e.datagridID,{val_config:e,remoteUpdate:{paging:g=>{r(u=>f.updateRowMeta(y(n({},u),{paging:y(n({},u.paging),{current:Math.max(1,Math.min(u.paging.total,g))})}),t))},maxRow:g=>{r(u=>f.updateRowMeta(y(n({},u),{paging:y(n({},u.paging),{rows:g,current:1})}),t))},searchKey:g=>{p.interval.once(()=>{r(u=>{let D=y(n({},u),{paging:y(n({},u.paging),{current:1}),filter:y(n({},u.filter),{keyword:String(g||"").trim()})});return f.updateRowMeta(D,t)})},300,"InputSearchTime")}}})},[e]);const o=me.useRef(!1);se(()=>{if(t.onSelected){if(!o.current){o.current=!0;return}t.onSelected(e.body.filter(g=>g.isSelected))}},[(s=e==null?void 0:e.body)==null?void 0:s.filter(g=>g.isSelected).length]);const i=me.useRef(!1);se(()=>{if(t.onSorted){if(!i.current){i.current=!0;return}t.onSorted(e.sort.col,e.sort.dir)}},[(K=e==null?void 0:e.sort)==null?void 0:K.col,(H=e==null?void 0:e.sort)==null?void 0:H.dir]);let a={input:t,val_config:e,set_config:r},{className:c,style:d}=xe(t),m=(I=t.colLength)!=null?I:t.header.length;return l(k,{className:c,style:d,children:l(T.Table,{className:Ke("DataGrid"),borderRadius:"inherit",children:q(T.Body,{children:[l(f.Header,n({},a)),l(f.Body,n({},a)),l(f.Footer,n({},a))]})},[m,...t.header.map(g=>g.key),e.sessionID].join("."))})},Checker:t=>l(k,{flexCenter:!0,onClick:e=>{e.stopPropagation()},children:l(E.Checker,y(n({wrapStyles:{display:"inlineBlock"},cellStyles:{gap:0}},t),{label:!1}))}),Header:t=>{var m,s,K,H;let{input:e,val_config:r,set_config:o}=t;if(e.headerless)return null;let i="datagrid-dragger-"+r.datagridID,a=["datagrid",r.datagridID,""].join("-"),c=1+r.body.filter(I=>I.isVisible).length+ +!!e.footer,d=(m=e.colLength)!=null?m:e.header.length;return l(ye.DropArea,y(n({jsxElement:T.Row,id:a},e.rowStyles),{dragInfo:{type:i,id:String(((H=(K=(s=r.body)==null?void 0:s.filter(I=>I.isFilterMatched))==null?void 0:K[0])==null?void 0:H.draggerIndex)||0),marker:"bottom"},children:e.header.toASC("columnIdx").map((I,g)=>{var re,oe,le,w,O,F;let[u,D]=X(I),te=D,{isTH:h,key:S,label:M,onLabelRender:B,columnIdx:Y,checkable:_,draggable:$,defSort:de,sortable:P,filterable:N,isHidden:v}=te,x=Q(te,["isTH","key","label","onLabelRender","columnIdx","checkable","draggable","defSort","sortable","filterable","isHidden"]);if(v)return null;let C={rowIdx:0,colIdx:g,topIdx:0,leftIdx:g,rightIdx:d-g-1,bottomIdx:c-1,isHeader:!0,isBody:!1,isFooter:!1},Z=$,A=P!=0,V=g==r.sort.col,J=p.deepMerge(p.deepCopy(e.cellStyles),fe(C,{}),(re=e.cellStyles)==null?void 0:re.onHeader,!C.leftIdx&&((oe=e.cellStyles)==null?void 0:oe.onLeft),!C.rightIdx&&((le=e.cellStyles)==null?void 0:le.onRight),!C.topIdx&&((w=e.cellStyles)==null?void 0:w.onTop),!C.bottomIdx&&((O=e.cellStyles)==null?void 0:O.onBottom),u);e.onCellStyles&&(J=e.onCellStyles(C,J||{}));let U=[],ee=[];if(Z&&U.push(l(ce.Clear.S,{ssSphere:2.5,fontColor:"theme",onMouseOver:b=>{Ce.open(b.currentTarget,q(pe.Mini,{children:[l(G,{icon:Se}),"\u30C9\u30E9\u30C3\u30B0\u3067\u5217\u306E\u9806\u756A\u3092\u5909\u66F4"]}),22)},onMouseLeave:b=>Ce.abort(),onClick:b=>{b.stopPropagation()},children:l(G.QuestionCircle,{})},"drag")),_){let b=l(f.Checker,{value:r.body.every(R=>R.isSelected),onUpdateValue:R=>{o(L=>{let j=n({},L);return j.body.forEach(ae=>{ae.isFilterMatched&&(ae.onCheckerDisabled||(ae.isSelected=!!R))}),j})}},"check");_=="left"?U.push(b):ee.push(b)}return A&&U.push(l(G,{fontSize:"1.mini",fontColor:"theme",opacity:V?"max":"low",transition:"middle",xcss:{transform:V&&r.sort.dir==-1?"rotate(180deg)":"none"},icon:V?Te:De},"sort")),l(T.Cell,y(n(n({isTH:!!h,ssPushable:!!P},X(J||{})[0]),x),{className:[e.cellClassName,x.className].join(" "),onClick:b=>{x.onClick&&x.onClick(b),e.onCellClick&&e.onCellClick(C,b),A&&o(R=>{let L=n({},R);return L.sort={col:g,dir:V?R.sort.dir*-1:P},f.updateRowMeta(L,e)})},children:q(W.Left,{gap:"1/3",height:1,children:[U,(F=B==null?void 0:B(S))!=null?F:l(k,{flexSizing:0,children:M!=null?M:S}),ee]})}),[g,I.key].join("/"))})}))},Body:t=>{var d,m;let{input:e,val_config:r,set_config:o}=t,i=r.body.filter(s=>s.isVisible),a=+!e.headerless+i.length+ +!!e.footer,c=(d=e.colLength)!=null?d:e.header.length;return i.length?l(Be,{children:i.map((s,K)=>{let{onCheckerDisabled:H,onDraggerDisabled:I}=s,g=K;e.headerless||(g+=1);let u="datagrid-dragger-"+r.datagridID,D=["datagrid",r.datagridID,s.row_id].join("-");return l(ye.DropArea,y(n({jsxElement:T.Row,id:D,ssPushable:!!e.onRowClick||!!s.onRowClick},e.rowStyles),{onClick:h=>{s.onRowClick&&s.onRowClick(h),e.onRowClick&&e.onRowClick(s,h)},dragInfo:{type:u,id:String(s.row_id||""),disabled:!r.draggable,marker:"bottom"},children:e.header.toASC("columnIdx").map((h,S)=>{var U,ee,te,re,oe,le;let M=h.draggable,B=s[h.key];if(!B)return null;let[Y,_]=X(B),J=_,{isTH:$,sortKey:de,data:P,label:N,onLabelRender:v}=J,x=Q(J,["isTH","sortKey","data","label","onLabelRender"]),C={rowIdx:g,colIdx:S,topIdx:g,leftIdx:S,rightIdx:c-S-1,bottomIdx:a-g-1,isHeader:!1,isBody:!0,isFooter:!1},Z=p.deepMerge(p.deepCopy(e.cellStyles),fe(C,{}),(U=e.cellStyles)==null?void 0:U.onBody,!C.leftIdx&&((ee=e.cellStyles)==null?void 0:ee.onLeft),!C.rightIdx&&((te=e.cellStyles)==null?void 0:te.onRight),!C.topIdx&&((re=e.cellStyles)==null?void 0:re.onTop),!C.bottomIdx&&((oe=e.cellStyles)==null?void 0:oe.onBottom),Y);e.onCellStyles&&(Z=e.onCellStyles(C,Z||{}));let A=[],V=[];return p.scope(()=>{if(M){if(s.onDraggerDisabled){A.push(s.onDraggerDisabled());return}A.push(l(ce.Clear.S,{tabIndex:-1,isRounded:!0,ssSphere:2.5,fontColor:"6.clear",onPointerDown:w=>{let O=p("#"+D)[0],F=O.cloneNode(!0);F.style.width=O.offsetWidth+"px",ye.Start(u,{dragElement:F,startEvent:w,originId:D,horizontal:!1},b=>be(void 0,null,function*(){if(!b.end||!b.onDropArea)return;let R=[...r.body],L=R.findIndex(z=>z.row_id==s.row_id);if(L==-1)return;let j=R.findIndex(z=>z.row_id==b.id);if(j<L&&j++,L==j)return;let ae=R.splice(L,1)[0];R.splice(j,0,ae),R.forEach((z,Re)=>{z.draggerIndex=Re}),e.onDragged&&e.onDragged(R),o(z=>y(n({},z),{body:R}))}))},children:l(W.Center,{gap:"1/4",children:l(G,{icon:Se})})},"drag"))}}),p.scope(()=>{if(!h.checkable)return;let w=l(f.Checker,{override:"force",value:!!s.isSelected,onUpdateValue:O=>{o(F=>y(n({},F),{body:F.body.map(b=>(b.row_id==s.row_id&&(b.isSelected=!!O),b))}))}},"check");s.onCheckerDisabled&&(w=s.onCheckerDisabled()),h.checkable=="left"?A.push(w):V.push(w)}),l(T.Cell,y(n(n({isTH:!!$},X(Z||{})[0]),x),{className:[e.cellClassName,x.className].join(" "),onClick:w=>{x.onClick&&x.onClick(w),e.onCellClick&&e.onCellClick(C,w)},children:q(W.Left,{gap:"1/3",height:1,children:[A,(le=v==null?void 0:v(P))!=null?le:l(k,{flexSizing:0,children:he(N!=null?N:String(P),r.filter.keyword)}),V]})}),[S,h.key].join("/"))})}),[s.row_id,g].join("."))})}):l(T.Row,y(n({},e.rowStyles),{children:l(T.Cell,{colSpan:c,padding:1,children:(m=e.onNoRecordsRender)==null?void 0:m.call(e)})}))},Footer:t=>{var c;let{input:e,val_config:r,set_config:o}=t;if(!e.footer)return null;let i=+!e.headerless+r.body.filter(d=>d.isVisible).length+1,a=(c=e.colLength)!=null?c:e.header.length;return l(T.Row,y(n({},e.rowStyles),{children:e.header.toASC("columnIdx").map((d,m)=>{var Y,_,$,de,P,N,v;let s=e.footer[d.key];if(!s)return null;p.isRecord(s)||(s={data:s});let[K,H]=X(s),B=H,{isTH:I,data:g,label:u,onLabelRender:D}=B,h=Q(B,["isTH","data","label","onLabelRender"]),S={rowIdx:i-1,colIdx:m,topIdx:i-1,leftIdx:m,rightIdx:a-m-1,bottomIdx:0,isHeader:!1,isBody:!1,isFooter:!0},M=p.deepMerge(p.deepCopy(e.cellStyles),fe(S,{}),(Y=e.cellStyles)==null?void 0:Y.onBody,(_=e.cellStyles)==null?void 0:_.onFooter,!S.leftIdx&&(($=e.cellStyles)==null?void 0:$.onLeft),!S.rightIdx&&((de=e.cellStyles)==null?void 0:de.onRight),!S.topIdx&&((P=e.cellStyles)==null?void 0:P.onTop),!S.bottomIdx&&((N=e.cellStyles)==null?void 0:N.onBottom),K);return e.onCellStyles&&(M=e.onCellStyles(S,M||{})),l(T.Cell,y(n(n({isTH:!!I},X(M||{})[0]),h),{className:[e.cellClassName,h.className].join(" "),onClick:x=>{h.onClick&&h.onClick(x),e.onCellClick&&e.onCellClick(S,x)},children:l(k,{flexSizing:0,children:(v=D==null?void 0:D(g))!=null?v:he(u!=null?u:String(g),r.filter.keyword)})}),[m,d.key].join("/"))})}))}},fe=(t,e)=>{let r=n({},e);return t.topIdx||(r.borderTop="unset"),t.bottomIdx||(r.borderBottom="unset"),t.rightIdx||(r.borderRight="unset"),t.leftIdx||(r.borderLeft="unset"),t.topIdx||(t.leftIdx||(r.borderTopLeftRadius="inherit"),t.rightIdx||(r.borderTopRightRadius="inherit")),t.bottomIdx||(t.leftIdx||(r.borderBottomLeftRadius="inherit"),t.rightIdx||(r.borderBottomRightRadius="inherit")),r},Me=t=>(t=n({datagridID:ge(),tone:"border",maxRows:100,onNoRecordsRender:()=>l(W.Center,{children:l(pe.Mini,{fontColor:"4.thin",children:"(\u30C7\u30FC\u30BF\u306A\u3057)"})})},t),t.rowStyles=n({backgroundColor:"layer.0"},t.rowStyles),t.cellStyles=n(y(n({},p.scope(()=>{if(!t.tone)return{};let e={};return p.isOneOf(t.tone,"border","border.horizontal")&&(e.borderBottom="2.normal"),p.isOneOf(t.tone,"border","border.vertical")&&(e.borderRight="2.normal"),e})),{position:"relative",padding:["1/3","2/3"],transition:"short"}),t.cellStyles),t.tone&&(t=n({border:!0,borderRadius:"2.tone.secondary",backgroundColor:"layer.1"},t)),t.header=f.toSafetyHeader(t.header||[]),t.header.forEach((e,r)=>{var o;e.sortable=(o=e.sortable)!=null?o:1,e.checkable===!0&&(e.checkable="left")}),l(f.index,n({},t))),ue={getBodyRows:t=>ne.get("rows-"+t)||[],toSafetyBody:f.toSafetyBody,reset:t=>{var e;(e=ne.get("reset-"+t))==null||e()},refreshBody:t=>{var e;(e=ne.get("refresh-"+t))==null||e()},reservedKeys:f.reservedKeys,Table:t=>l(k,y(n({htmlTag:"table",borderRadius:"inherit"},t),{border:t.border})),Head:t=>l(k,n({htmlTag:"thead",borderRadius:"inherit"},t)),Body:t=>l(k,n({htmlTag:"tbody",borderRadius:"inherit"},t)),Row:t=>l(k,n({htmlTag:"tr",borderRadius:"inherit"},t)),TH:t=>l(k,n({htmlTag:"th"},t)),TD:t=>l(k,n({htmlTag:"td"},t)),Cell:t=>{let o=t,{isTH:e}=o,r=Q(o,["isTH"]);return e?l(ue.TH,n({},r)):l(ue.TD,n({},r))},RightIndicator:{data:"",label:l(W.Right,{children:l(G.AngleRight,{fontColor:"theme",fontSize:"3.paragraph"})})},SearchInput:t=>{let a=t,{datagridID:e}=a,r=Q(a,["datagridID"]),o=ie.catch(t.datagridID);if(!o)return console.warn("[DataGrid] SearchInput must be used inside DataGrid."),null;let{val_config:i}=o;return l(E.TextField,y(n({label:"\u691C\u7D22...",clearButton:!0,padding:["1/2","2/3"],rightIcon:l(E.RightIcon,{ssSphere:2,fontColor:"5.translucent",right:"2/3",children:l(G.Search,{})}),value:i.filter.keyword},r),{onUpdateValidValue:(...c)=>{r.onUpdateValidValue&&r.onUpdateValidValue(...c),o.remoteUpdate.searchKey(c[0])}}))},Info:t=>{let e=ie.catch(t.datagridID);if(!e)return null;let{val_config:r}=e,o=t.totalCount||r.body.length,i=r.body.filter(c=>c.isFilterMatched).length,a=i.ratio(o,1)||0;return q(we,{verticalAlign:"baseline",gap:"1/2",fontSize:"1.mini",fontColor:"3.blur",children:[l(ke,{fontSize:"4.thirdTitle",fontColor:"theme",children:i.toLocaleString()}),"/ ",o.toLocaleString(),"\u4EF6 (",a,"%)"]})},Paging:t=>{let e=ie.catch(t.datagridID);if(!e)return null;let{val_config:r}=e,o=[];for(let a=0;a<r.paging.total;a++)o.push({value:a+1,label:(a+1).toString()});const i=a=>{let c=Math.min(Math.max(1,a),r.paging.total),d=n({},r);d.paging.current=c,e.remoteUpdate.paging(c)};return l(E.Select,{emptySelect:!1,padding:["1/3","2/3"],override:"force",gap:0,leftIcon:l(E.LeftIcon,{xcss:{left:2,pointerEvents:"all"},children:l(ce.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(r.paging.current==1){i(r.paging.total);return}i(r.paging.current-1)},children:l(G.ChevronLeft,{})})}),rightIcon:l(E.RightIcon,{xcss:{right:2,pointerEvents:"all"},children:l(ce.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(r.paging.current==r.paging.total){i(1);return}i(r.paging.current+1)},children:l(G.ChevronRight,{})})}),options:o.map(a=>({value:a.value||0,label:q(W.Left,{gap:"1/3",verticalAlign:"baseline",children:[a.label,q(pe.Micro,{fontColor:"4.thin",children:["/ ",r.paging.total]})]})})),value:r.paging.current,onUpdateValidValue:a=>{i(a)}})},RowCount:t=>{let e=ie.catch(t.datagridID);if(!e)return null;let{val_config:r}=e,o=r.body.filter(d=>d.isFilterMatched).length,i=r.paging.rows,a=0,c=t.options.map(d=>(a|=+(d==i),{value:d,label:d.toString()}));return a||c.push({value:i,label:i.toString()}),l(W.Center,{gap:"1/2",children:l(E.Select,{emptySelect:!1,override:"force",padding:"1/3",paddingLeft:3,paddingRight:2,pickerStyles:{xcss:{minWidth:12*9}},pickerPosition:4,leftIcon:l(E.LeftIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{left:6},children:"\u8868\u793A"}),rightIcon:l(E.RightIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{right:6},children:"\u4EF6"}),value:r.paging.rows,options:c.toASC("value"),onUpdateValidValue:d=>{e.remoteUpdate.maxRow(Number(d))}})})}},T=Object.assign(Me,ue);export{T as DataGrid,T as default,fe as onDefaultCellStyles};
|
|
1
|
+
import{b as a,c as p,d as G,e as be}from"../../chunk-C5N2D3ZX.js";import{Fragment as Be,jsx as l,jsxs as $}from"react/jsx-runtime";import f,{useStore as ne,UUID as ge}from"jmini";import me,{useState as Re,useEffect as se}from"react";import{ExtractStyles as X,GenerateHTMLProps as xe,dragEffect as ye,useRemote as ie}from"../../@utils";import{faArrowUp as Te}from"@fortawesome/free-solid-svg-icons/faArrowUp";import{faUpDown as De}from"@fortawesome/free-solid-svg-icons/faUpDown";import{Box as K,Flex as we,FAI as _,Span as ke}from"../../atoms";import{Literal as pe,Row as q,MarkerPen as he}from"../../mols";import{Button as ce}from"../Button";import E from"../Input";import{TableClasses as Ke}from"../../@styles/componentClasses";import{faGripVertical as Se}from"@fortawesome/free-solid-svg-icons/faGripVertical";import{Tips as Ce}from"../Tips";const u={reservedKeys:["row_id","onCheckerDisabled","onDraggerDisabled","columnIdx","isSelected","isFilterMatched","isVisible","draggerIndex","onRowClick"],toSafetyHeader:t=>{let e=!!t.some(o=>o.draggable);return(t==null?void 0:t.map((o,n)=>{var d;return f.isRecord(o)||(o={key:o}),f.isString(o.key)&&(o.key=o.key.replace(/[.\s]/g,"_")),e&&(o.sortable=0,o.filterable=!1),o.columnIdx=(d=o.columnIdx)!=null?d:n,o}).toASC("columnIdx"))||[]},toSafetyBody:t=>t==null?void 0:t.map((e,r)=>{var n;let o={};return Object.entries(e).forEach(([d,c])=>{var g,i;if(f.isOneOf(d,...u.reservedKeys))return;let s=c;f.isNullish(s)||(f.isRecord(s)||(s={data:s}),f.isString(d)&&(d=d.replace(/[.\s]/g,"_")),s.sortKey=(i=(g=s.sortKey)!=null?g:String(s.data))!=null?i:"",o[d]=s)}),o=p(a({},o),{row_id:(n=e.row_id)!=null?n:r,onRowClick:e.onRowClick,isSelected:!!e.isSelected,isFilterMatched:!0,isVisible:!0,onCheckerDisabled:e.onCheckerDisabled,onDraggerDisabled:e.onDraggerDisabled,draggerIndex:r}),o}),toSafetyData:t=>{var o,n;let{header:e=[]}=t,r={datagridID:t.datagridID||ge(),sessionID:ge(),body:u.toSafetyBody(t.body||[]),filter:{keyword:t.defaultSearchKey||"",current:[]},sort:{col:-1,dir:1},paging:{rows:t.maxRows||100,total:1,current:1},draggable:!!e.some(d=>d.draggable)};{let d=e==null?void 0:e.findIndex(c=>c.defSort);d!==-1&&(r.sort.col=d,r.sort.dir=(n=(o=e[d])==null?void 0:o.sortable)!=null?n:1)}return r.draggable&&(r.sort.col=-1,r.sort.dir=0),u.updateRowMeta(r,t)},updateRowMeta:(t,e)=>{let r=a({},t);if(r.sort.col>=0&&r.sort.dir){let o=e.header[r.sort.col].key;r.sort.dir==1?r.body.toASC(o+".sortKey"):r.body.toDESC(o+".sortKey")}{let o=String(r.filter.keyword)||"";r.body.forEach(n=>{if(n.isFilterMatched=!0,!o)return;let d=e.header.some(c=>{var i;let s=n[c.key];return!s||!s.sortKey?!1:!!((i=String(s.sortKey||s.data))!=null&&i.match(new RegExp(o.escapeRegExChar(),"i")))});n.isFilterMatched=d})}{let o=r.paging.rows;r.paging.total=Math.ceil(r.body.filter(s=>s.isFilterMatched).length/o);let n=o*(r.paging.current-1),d=n+o,c=0;r.body.forEach(s=>{s.isVisible=!1,s.isFilterMatched&&(s.isVisible=c>=n&&c<d,c++)})}return r.draggable&&r.body.toASC("draggerIndex"),r},index:t=>{var i,b,H,x;let[e,r]=Re(()=>u.toSafetyData(t));se(()=>{ne.set({["reset-"+e.datagridID]:()=>{r(u.toSafetyData(t))},["refresh-"+e.datagridID]:()=>{r(y=>u.updateRowMeta(p(a({},y),{body:u.toSafetyBody(t.body)}),t))}})},[t]),se(()=>{ne.set({["rows-"+e.datagridID]:e.body}),ie.bridge(e.datagridID,{val_config:e,remoteUpdate:{paging:y=>{r(m=>u.updateRowMeta(p(a({},m),{paging:p(a({},m.paging),{current:Math.max(1,Math.min(m.paging.total,y))})}),t))},maxRow:y=>{r(m=>u.updateRowMeta(p(a({},m),{paging:p(a({},m.paging),{rows:y,current:1})}),t))},searchKey:y=>{f.interval.once(()=>{r(m=>{let w=p(a({},m),{paging:p(a({},m.paging),{current:1}),filter:p(a({},m.filter),{keyword:String(y||"").trim()})});return u.updateRowMeta(w,t)})},300,"InputSearchTime")}}})},[e]);const o=me.useRef(!1);se(()=>{if(t.onSelected){if(!o.current){o.current=!0;return}t.onSelected(e.body.filter(y=>y.isSelected))}},[(i=e==null?void 0:e.body)==null?void 0:i.filter(y=>y.isSelected).length]);const n=me.useRef(!1);se(()=>{if(t.onSorted){if(!n.current){n.current=!0;return}t.onSorted(e.sort.col,e.sort.dir)}},[(b=e==null?void 0:e.sort)==null?void 0:b.col,(H=e==null?void 0:e.sort)==null?void 0:H.dir]);let d={input:t,val_config:e,set_config:r},{className:c,style:s}=xe(t),g=(x=t.colLength)!=null?x:t.header.length;return l(K,{className:c,style:s,children:l(D.Table,{className:Ke("DataGrid"),borderRadius:"inherit",children:$(D.Body,{children:[l(u.Header,a({},d)),l(u.Body,a({},d)),l(u.Footer,a({},d))]})},[g,...t.header.map(y=>y.key),e.sessionID].join("."))})},Checker:t=>l(K,{flexCenter:!0,onClick:e=>{e.stopPropagation()},children:l(E.Checker,p(a({wrapStyles:{display:"inlineBlock"},cellStyles:{gap:0}},t),{label:!1}))}),Header:t=>{var g,i,b,H;let{input:e,val_config:r,set_config:o}=t;if(e.headerless)return null;let n="datagrid-dragger-"+r.datagridID,d=["datagrid",r.datagridID,""].join("-"),c=1+r.body.filter(x=>x.isVisible).length+ +!!e.footer,s=(g=e.colLength)!=null?g:e.header.length;return l(ye.DropArea,p(a({jsxElement:D.Row,id:d},e.rowStyles),{dragInfo:{type:n,id:String(((H=(b=(i=r.body)==null?void 0:i.filter(x=>x.isFilterMatched))==null?void 0:b[0])==null?void 0:H.draggerIndex)||0),marker:"bottom"},children:e.header.toASC("columnIdx").map((x,y)=>{var re,oe,le,k,j,F;let[m,w]=X(x),te=w,{isTH:S,key:C,label:M,onLabelRender:B,columnIdx:Y,checkable:N,draggable:J,defSort:de,sortable:P,filterable:A,isHidden:v}=te,T=G(te,["isTH","key","label","onLabelRender","columnIdx","checkable","draggable","defSort","sortable","filterable","isHidden"]);if(v)return null;let I={rowIdx:0,colIdx:y,topIdx:0,leftIdx:y,rightIdx:s-y-1,bottomIdx:c-1,isHeader:!0,isBody:!1,isFooter:!1},Z=J,V=P!=0,O=y==r.sort.col,Q=f.deepMerge(f.deepCopy(e.cellStyles),fe(I,{}),(re=e.cellStyles)==null?void 0:re.onHeader,!I.leftIdx&&((oe=e.cellStyles)==null?void 0:oe.onLeft),!I.rightIdx&&((le=e.cellStyles)==null?void 0:le.onRight),!I.topIdx&&((k=e.cellStyles)==null?void 0:k.onTop),!I.bottomIdx&&((j=e.cellStyles)==null?void 0:j.onBottom),m);e.onCellStyles&&(Q=e.onCellStyles(I,Q||{}));let U=[],ee=[];if(Z&&U.push(l(ce.Clear.S,{ssSphere:2.5,fontColor:"theme",onMouseOver:h=>{Ce.open(h.currentTarget,$(pe.Mini,{children:[l(_,{icon:Se}),"\u30C9\u30E9\u30C3\u30B0\u3067\u5217\u306E\u9806\u756A\u3092\u5909\u66F4"]}),22)},onMouseLeave:h=>Ce.abort(),onClick:h=>{h.stopPropagation()},children:l(_.QuestionCircle,{})},"drag")),N){let h=l(u.Checker,{value:r.body.every(R=>R.isSelected),onUpdateValue:R=>{o(L=>{let z=a({},L);return z.body.forEach(ae=>{ae.isFilterMatched&&(ae.onCheckerDisabled||(ae.isSelected=!!R))}),z})}},"check");N=="left"?U.push(h):ee.push(h)}return V&&U.push(l(_,{fontSize:"1.mini",fontColor:"theme",opacity:O?"max":"low",transition:"middle",xcss:{transform:O&&r.sort.dir==-1?"rotate(180deg)":"none"},icon:O?Te:De},"sort")),l(D.Cell,p(a(a({isTH:!!S,ssPushable:!!P},X(Q||{})[0]),T),{className:[e.cellClassName,T.className].join(" "),onClick:h=>{T.onClick&&T.onClick(h),e.onCellClick&&e.onCellClick(I,h),V&&o(R=>{let L=a({},R);return L.sort={col:y,dir:O?R.sort.dir*-1:P},u.updateRowMeta(L,e)})},children:$(q.Left,{gap:"1/3",height:1,children:[U,(F=B==null?void 0:B(C))!=null?F:l(K,{flexSizing:0,children:M!=null?M:C}),ee]})}),[y,x.key].join("/"))})}))},Body:t=>{var s,g;let{input:e,val_config:r,set_config:o}=t,n=r.body.filter(i=>i.isVisible),d=+!e.headerless+n.length+ +!!e.footer,c=(s=e.colLength)!=null?s:e.header.length;return n.length?l(Be,{children:n.map((i,b)=>{let{onCheckerDisabled:H,onDraggerDisabled:x}=i,y=b;e.headerless||(y+=1);let m="datagrid-dragger-"+r.datagridID,w=["datagrid",r.datagridID,i.row_id].join("-");return l(ye.DropArea,p(a({jsxElement:D.Row,id:w,ssPushable:!!e.onRowClick||!!i.onRowClick},e.rowStyles),{onClick:S=>{i.onRowClick&&i.onRowClick(S),e.onRowClick&&e.onRowClick(i,S)},dragInfo:{type:m,id:String(i.row_id||""),disabled:!r.draggable,marker:"bottom"},children:e.header.toASC("columnIdx").map((S,C)=>{var U,ee,te,re,oe,le;let M=S.draggable,B=i[S.key];if(!B)return null;let[Y,N]=X(B),Q=N,{isTH:J,sortKey:de,data:P,label:A,onLabelRender:v}=Q,T=G(Q,["isTH","sortKey","data","label","onLabelRender"]),I={rowIdx:y,colIdx:C,topIdx:y,leftIdx:C,rightIdx:c-C-1,bottomIdx:d-y-1,isHeader:!1,isBody:!0,isFooter:!1},Z=f.deepMerge(f.deepCopy(e.cellStyles),fe(I,{}),(U=e.cellStyles)==null?void 0:U.onBody,!I.leftIdx&&((ee=e.cellStyles)==null?void 0:ee.onLeft),!I.rightIdx&&((te=e.cellStyles)==null?void 0:te.onRight),!I.topIdx&&((re=e.cellStyles)==null?void 0:re.onTop),!I.bottomIdx&&((oe=e.cellStyles)==null?void 0:oe.onBottom),Y);e.onCellStyles&&(Z=e.onCellStyles(I,Z||{}));let V=[],O=[];return f.scope(()=>{if(M){if(i.onDraggerDisabled){V.push(i.onDraggerDisabled());return}V.push(l(ce.Clear.S,{tabIndex:-1,isRounded:!0,ssSphere:2.5,fontColor:"6.clear",onPointerDown:k=>{let j=f("#"+w)[0],F=j.cloneNode(!0);F.style.width=j.offsetWidth+"px",ye.Start(m,{dragElement:F,startEvent:k,originId:w,horizontal:!1},h=>be(void 0,null,function*(){if(!h.end||!h.onDropArea)return;let R=[...r.body],L=R.findIndex(W=>W.row_id==i.row_id);if(L==-1)return;let z=R.findIndex(W=>W.row_id==h.id);if(z<L&&z++,L==z)return;let ae=R.splice(L,1)[0];R.splice(z,0,ae),R.forEach((W,Ie)=>{W.draggerIndex=Ie}),e.onDragged&&e.onDragged(R),o(W=>p(a({},W),{body:R}))}))},children:l(q.Center,{gap:"1/4",children:l(_,{icon:Se})})},"drag"))}}),f.scope(()=>{if(!S.checkable)return;let k=l(u.Checker,{override:"force",value:!!i.isSelected,onUpdateValue:j=>{o(F=>p(a({},F),{body:F.body.map(h=>(h.row_id==i.row_id&&(h.isSelected=!!j),h))}))}},"check");i.onCheckerDisabled&&(k=i.onCheckerDisabled()),S.checkable=="left"?V.push(k):O.push(k)}),l(D.Cell,p(a(a({isTH:!!J},X(Z||{})[0]),T),{className:[e.cellClassName,T.className].join(" "),onClick:k=>{T.onClick&&T.onClick(k),e.onCellClick&&e.onCellClick(I,k)},children:$(q.Left,{gap:"1/3",height:1,children:[V,(le=v==null?void 0:v(P))!=null?le:l(K,{flexSizing:0,children:he(A!=null?A:String(P),r.filter.keyword)}),O]})}),[C,S.key].join("/"))})}),[i.row_id,y].join("."))})}):l(D.Row,p(a({},e.rowStyles),{children:l(D.Cell,{colSpan:c,padding:1,children:(g=e.onNoRecordsRender)==null?void 0:g.call(e)})}))},Footer:t=>{var c;let{input:e,val_config:r,set_config:o}=t;if(!e.footer)return null;let n=+!e.headerless+r.body.filter(s=>s.isVisible).length+1,d=(c=e.colLength)!=null?c:e.header.length;return l(D.Row,p(a({},e.rowStyles),{children:e.header.toASC("columnIdx").map((s,g)=>{var Y,N,J,de,P,A,v;let i=e.footer[s.key];if(!i)return null;f.isRecord(i)||(i={data:i});let[b,H]=X(i),B=H,{isTH:x,data:y,label:m,onLabelRender:w}=B,S=G(B,["isTH","data","label","onLabelRender"]),C={rowIdx:n-1,colIdx:g,topIdx:n-1,leftIdx:g,rightIdx:d-g-1,bottomIdx:0,isHeader:!1,isBody:!1,isFooter:!0},M=f.deepMerge(f.deepCopy(e.cellStyles),fe(C,{}),(Y=e.cellStyles)==null?void 0:Y.onBody,(N=e.cellStyles)==null?void 0:N.onFooter,!C.leftIdx&&((J=e.cellStyles)==null?void 0:J.onLeft),!C.rightIdx&&((de=e.cellStyles)==null?void 0:de.onRight),!C.topIdx&&((P=e.cellStyles)==null?void 0:P.onTop),!C.bottomIdx&&((A=e.cellStyles)==null?void 0:A.onBottom),b);return e.onCellStyles&&(M=e.onCellStyles(C,M||{})),l(D.Cell,p(a(a({isTH:!!x},X(M||{})[0]),S),{className:[e.cellClassName,S.className].join(" "),onClick:T=>{S.onClick&&S.onClick(T),e.onCellClick&&e.onCellClick(C,T)},children:l(K,{flexSizing:0,children:(v=w==null?void 0:w(y))!=null?v:he(m!=null?m:String(y),r.filter.keyword)})}),[g,s.key].join("/"))})}))}},fe=(t,e)=>{let r=a({},e);return t.topIdx||(r.borderTop="unset"),t.bottomIdx||(r.borderBottom="unset"),t.rightIdx||(r.borderRight="unset"),t.leftIdx||(r.borderLeft="unset"),t.topIdx||(t.leftIdx||(r.borderTopLeftRadius="inherit"),t.rightIdx||(r.borderTopRightRadius="inherit")),t.bottomIdx||(t.leftIdx||(r.borderBottomLeftRadius="inherit"),t.rightIdx||(r.borderBottomRightRadius="inherit")),r},Me=t=>(t=a({datagridID:ge(),tone:"border",maxRows:100,onNoRecordsRender:()=>l(q.Center,{children:l(pe.Mini,{fontColor:"4.thin",children:"(\u30C7\u30FC\u30BF\u306A\u3057)"})})},t),t.rowStyles=a({backgroundColor:"layer.0"},t.rowStyles),t.cellStyles=a(p(a({},f.scope(()=>{if(!t.tone)return{};let e={};return f.isOneOf(t.tone,"border","border.horizontal")&&(e.borderBottom="2.normal"),f.isOneOf(t.tone,"border","border.vertical")&&(e.borderRight="2.normal"),e})),{position:"relative",padding:["1/3","2/3"],transition:"short"}),t.cellStyles),t.tone&&(t=a({border:!0,borderRadius:"2.tone.secondary",backgroundColor:"layer.1"},t)),t.header=u.toSafetyHeader(t.header||[]),t.header.forEach((e,r)=>{var o;e.sortable=(o=e.sortable)!=null?o:1,e.checkable===!0&&(e.checkable="left")}),l(u.index,a({},t))),ue={getBodyRows:t=>ne.get("rows-"+t)||[],toSafetyBody:u.toSafetyBody,reset:t=>{var e;(e=ne.get("reset-"+t))==null||e()},refreshBody:t=>{var e;(e=ne.get("refresh-"+t))==null||e()},reservedKeys:u.reservedKeys,Table:t=>l(K,p(a({htmlTag:"table",borderRadius:"inherit"},t),{border:t.border})),Head:t=>l(K,a({htmlTag:"thead",borderRadius:"inherit"},t)),Body:t=>l(K,a({htmlTag:"tbody",borderRadius:"inherit"},t)),Row:t=>l(K,a({htmlTag:"tr",borderRadius:"inherit"},t)),TH:t=>l(K,a({htmlTag:"th"},t)),TD:t=>l(K,a({htmlTag:"td"},t)),Cell:t=>{let o=t,{isTH:e}=o,r=G(o,["isTH"]);return e?l(ue.TH,a({},r)):l(ue.TD,a({},r))},RightIndicator:{data:"",label:l(q.Right,{children:l(_.AngleRight,{fontColor:"theme",fontSize:"3.paragraph"})})},SearchInput:t=>{let d=t,{datagridID:e}=d,r=G(d,["datagridID"]),o=ie.catch(t.datagridID);if(!o)return console.warn("[DataGrid] SearchInput must be used inside DataGrid."),null;let{val_config:n}=o;return l(E.TextField,p(a({label:"\u691C\u7D22...",clearButton:!0,padding:["1/2","2/3"],rightIcon:l(E.RightIcon,{ssSphere:2,fontColor:"5.translucent",right:"2/3",children:l(_.Search,{})}),value:n.filter.keyword},r),{onUpdateValidValue:(...c)=>{r.onUpdateValidValue&&r.onUpdateValidValue(...c),o.remoteUpdate.searchKey(c[0])}}))},Info:t=>{let e=ie.catch(t.datagridID);if(!e)return null;let{val_config:r}=e,o=t.totalCount||r.body.length,n=r.body.filter(c=>c.isFilterMatched).length,d=n.toRate(o,1)||0;return $(we,{verticalAlign:"baseline",gap:"1/2",fontSize:"1.mini",fontColor:"3.blur",children:[l(ke,{fontSize:"4.thirdTitle",fontColor:"theme",children:n.toLocaleString()}),"/ ",o.toLocaleString(),"\u4EF6 (",d,"%)"]})},Paging:t=>{let s=t,{datagridID:e}=s,r=G(s,["datagridID"]),o=ie.catch(e);if(!o)return null;let{val_config:n}=o,d=[];for(let g=0;g<n.paging.total;g++)d.push({value:g+1,label:(g+1).toString()});const c=g=>{let i=Math.min(Math.max(1,g),n.paging.total),b=a({},n);b.paging.current=i,o.remoteUpdate.paging(i)};return l(E.Select,p(a({emptySelect:!1,padding:["1/3","2/3"],override:"force",gap:0},r),{leftIcon:l(E.LeftIcon,{xcss:{left:2,pointerEvents:"all"},children:l(ce.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(n.paging.current==1){c(n.paging.total);return}c(n.paging.current-1)},children:l(_.ChevronLeft,{})})}),rightIcon:l(E.RightIcon,{xcss:{right:2,pointerEvents:"all"},children:l(ce.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(n.paging.current==n.paging.total){c(1);return}c(n.paging.current+1)},children:l(_.ChevronRight,{})})}),options:d.map(g=>({value:g.value||0,label:$(q.Left,{gap:"1/3",verticalAlign:"baseline",children:[g.label,$(pe.Micro,{fontColor:"4.thin",children:["/ ",n.paging.total]})]})})),value:n.paging.current,onUpdateValidValue:g=>{c(g)}}))},RowCount:t=>{let i=t,{datagridID:e}=i,r=G(i,["datagridID"]),o=ie.catch(e);if(!o)return null;let{val_config:n}=o,d=n.body.filter(b=>b.isFilterMatched).length,c=n.paging.rows,s=0,g=t.options.map(b=>(s|=+(b==c),{value:b,label:b.toString()}));return s||g.push({value:c,label:c.toString()}),l(q.Center,{gap:"1/2",children:l(E.Select,p(a({emptySelect:!1,override:"force",padding:"1/3",paddingLeft:3,paddingRight:2,pickerStyles:{xcss:{minWidth:12*9}},pickerPosition:4,leftIcon:l(E.LeftIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{left:6},children:"\u8868\u793A"}),rightIcon:l(E.RightIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{right:6},children:"\u4EF6"})},r),{value:n.paging.rows,options:g.toASC("value"),onUpdateValidValue:b=>{o.remoteUpdate.maxRow(Number(b))}}))})}},D=Object.assign(Me,ue);export{D as DataGrid,D as default,fe as onDefaultCellStyles};
|
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/fn/Input/Switch.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as o,c as s,d as T}from"../../chunk-C5N2D3ZX.js";import{jsx as a,jsxs as k}from"react/jsx-runtime";import{UUID as b}from"jmini";import{useState as E}from"react";import h from"../../atoms/Box";import{Row as L}from"../../mols";import{Label as U}from"../Button";import{OptionalInputWrapper as P,BoxWrapper as W,CoreEffects as B}from"./core";import{InputSwitchClasses as g}from"../../@styles/componentClasses";function A(e){let{value:n,states:l}=e,{required:S}=l,r=[];return S&&!n&&r.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!r.filter(({type:I})=>I=="invalid").length,notice:r}}const O=e=>{let V=e,{componentId:n,color:l="posi",required:S,form:r,id:I,enableFormSubmit:M,showInitValidation:_,onChange:R,onKeyDown:F,onValidate:H,onValidateDelay:q,onUpdateValue:K,onUpdateValidValue:$,onUserAction:j,size:C="regular",value:N="",icon:v="",isApply:p=!1}=V,t=T(V,["componentId","color","required","form","id","enableFormSubmit","showInitValidation","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","size","value","icon","isApply"]),[c,u]=E({componentId:e.componentId||"",rawValue:N,eventType:"init",eventID:b(12)}),d=!!c.rawValue;B.CommonEffects({type:"switch",states:e,val_status:c,set_status:u,SystemValidation:A});let f="middle",x=5,y=3;return p&&(y=4),k(W,{val_status:c,set_status:u,states:e,children:[a(h,s(o({htmlTag:"input",type:"checkbox","data-component-id":c.componentId,checked:c.rawValue,className:g("Input"),id:I,onKeyDown:i=>{F&&F(i),M&&B.SubmitForm(i,r)},onChange:i=>{let{checked:m}=i.target;u(z=>s(o({},z),{rawValue:m,eventType:"update",eventID:b(12),isInspected:!1,isValidated:!1,notice:[]})),R&&R(i)}},t),{onFocus:i=>{t!=null&&t.onFocus&&(t==null||t.onFocus(i)),u(m=>s(o({},m),{eventID:b(12),isFocusing:!0}))},onBlur:i=>{t!=null&&t.onBlur&&(t==null||t.onBlur(i)),u(m=>s(o({},m),{eventID:b(12),isFocusing:!1}))}})),a(U.Plain,{tabIndex:-1,htmlFor:I,padding:"1/4",transition:f,borderRadius:"1.tone.primary",className:g("Label"),children:a(h,s(o({},p?{padding:"1/4",isRounded:!0,backgroundColor:d?l:"layer.3"}:{}),{children:k(L.Center,{unitHeight:C=="small"?2:C=="regular"?2.5:C=="large"?3:0,position:"relative",xcss:{aspectRatio:(x+y)/x},children:[!p&&a(h,{position:"absolute",backgroundColor:d?l:"layer.5",isRounded:!0,transition:f,width:1,opacity:"middle",className:g("Bar"),xcss:{height:"40%"}}),a(h,{position:"absolute",top:0,backgroundColor:!p&&d?l:"white",transition:f,isRounded:!0,flexCenter:!0,boxShadow:"1.remark",className:g("Dot"),xcss:{height:"100%",aspectRatio:"1",left:d?`calc(${y.
|
|
1
|
+
import{b as o,c as s,d as T}from"../../chunk-C5N2D3ZX.js";import{jsx as a,jsxs as k}from"react/jsx-runtime";import{UUID as b}from"jmini";import{useState as E}from"react";import h from"../../atoms/Box";import{Row as L}from"../../mols";import{Label as U}from"../Button";import{OptionalInputWrapper as P,BoxWrapper as W,CoreEffects as B}from"./core";import{InputSwitchClasses as g}from"../../@styles/componentClasses";function A(e){let{value:n,states:l}=e,{required:S}=l,r=[];return S&&!n&&r.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!r.filter(({type:I})=>I=="invalid").length,notice:r}}const O=e=>{let V=e,{componentId:n,color:l="posi",required:S,form:r,id:I,enableFormSubmit:M,showInitValidation:_,onChange:R,onKeyDown:F,onValidate:H,onValidateDelay:q,onUpdateValue:K,onUpdateValidValue:$,onUserAction:j,size:C="regular",value:N="",icon:v="",isApply:p=!1}=V,t=T(V,["componentId","color","required","form","id","enableFormSubmit","showInitValidation","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","size","value","icon","isApply"]),[c,u]=E({componentId:e.componentId||"",rawValue:N,eventType:"init",eventID:b(12)}),d=!!c.rawValue;B.CommonEffects({type:"switch",states:e,val_status:c,set_status:u,SystemValidation:A});let f="middle",x=5,y=3;return p&&(y=4),k(W,{val_status:c,set_status:u,states:e,children:[a(h,s(o({htmlTag:"input",type:"checkbox","data-component-id":c.componentId,checked:c.rawValue,className:g("Input"),id:I,onKeyDown:i=>{F&&F(i),M&&B.SubmitForm(i,r)},onChange:i=>{let{checked:m}=i.target;u(z=>s(o({},z),{rawValue:m,eventType:"update",eventID:b(12),isInspected:!1,isValidated:!1,notice:[]})),R&&R(i)}},t),{onFocus:i=>{t!=null&&t.onFocus&&(t==null||t.onFocus(i)),u(m=>s(o({},m),{eventID:b(12),isFocusing:!0}))},onBlur:i=>{t!=null&&t.onBlur&&(t==null||t.onBlur(i)),u(m=>s(o({},m),{eventID:b(12),isFocusing:!1}))}})),a(U.Plain,{tabIndex:-1,htmlFor:I,padding:"1/4",transition:f,borderRadius:"1.tone.primary",className:g("Label"),children:a(h,s(o({},p?{padding:"1/4",isRounded:!0,backgroundColor:d?l:"layer.3"}:{}),{children:k(L.Center,{unitHeight:C=="small"?2:C=="regular"?2.5:C=="large"?3:0,position:"relative",xcss:{aspectRatio:(x+y)/x},children:[!p&&a(h,{position:"absolute",backgroundColor:d?l:"layer.5",isRounded:!0,transition:f,width:1,opacity:"middle",className:g("Bar"),xcss:{height:"40%"}}),a(h,{position:"absolute",top:0,backgroundColor:!p&&d?l:"white",transition:f,isRounded:!0,flexCenter:!0,boxShadow:"1.remark",className:g("Dot"),xcss:{height:"100%",aspectRatio:"1",left:d?`calc(${y.toRate(x+y)}%)`:0},children:v&&a(h,{transition:f,flexCenter:!0,fontColor:d?p?l:"white":"6.clear",children:v})})]})}))})]})},w=e=>{let n=o({},e);return n.value=!!n.value,n.color=n.color||"theme",a(P,{componentId:n.componentId,children:O,states:n})},D=Object.assign(w,{S:e=>a(w,s(o({},e),{size:"small"})),R:e=>a(w,s(o({},e),{size:"regular"})),L:e=>a(w,s(o({},e),{size:"large"}))});export{D as Switch,D as default};
|
package/dist/fn/Table/Data.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as r,c as S,d as $}from"../../chunk-C5N2D3ZX.js";import{Fragment as U,jsx as a,jsxs as _}from"react/jsx-runtime";import D,{UUID as G,useStore as Q}from"jmini";import{useState as Y,useEffect as W}from"react";import{useRemote as E}from"../../@utils";import{Box as B,Flex as M,FAI as N,Span as le,Column as oe}from"../../atoms";import{Literal as ne,Row as j}from"../../mols";import{Button as F}from"../Button";import ee from"../Sheet";import I from"../Input";import{faArrowUp as se}from"@fortawesome/free-solid-svg-icons/faArrowUp";import{faArrowDown as ie}from"@fortawesome/free-solid-svg-icons/faArrowDown";import{faArrowRight as ce}from"@fortawesome/free-solid-svg-icons/faArrowRight";import{faFilter as de}from"@fortawesome/free-solid-svg-icons/faFilter";import R from"./Parts";import ue from"./Wrapper";import{DefaultCellSystemAdjustingStyles as K}from"./cellStyling";import{TableClasses as b}from"../../@styles/componentClasses";const x={__memoryID:G(),Header:t=>{var g,w;let{val_status:e,set_status:i,KeywordFilterRows:h}=r({},t),{order:s,filter:l}=e,[d,p]=s.current,m=[],c=[...e.head];if(e.checker){let n={top:!0,bottom:!e.rows.length,left:!0,right:!e.colLength,rowIndex:0,colIndex:0,isBody:!1,isHeader:!0},o=K(n),u=e.cellStylesCallback?e.cellStylesCallback(n):{};m.push(a(R.TH,S(r(r(r({fontWeight:"2.normal",position:"sticky",ssZIndex:2,top:0,unitWidth:4,padding:0},e.cellStyles),o),u),{xcss:r(r({},(g=e.cellStyles)==null?void 0:g.xcss),u.xcss),className:[b("Cell"),e.cellClassName].join(" "),children:a(B,{flexCenter:!0,children:a(I.Checker,{label:"",value:!1,onUpdateValidValue:f=>{let y=e.rows;y.forEach(T=>{T.checked=f}),i(S(r({},e),{rows:y}))}})})}),-1))}for(let n=0;n<e.colLength;n++){let o=c[n];if(!o)continue;let u=o.children||o.data,f=s.enabled&&s.column[n],y=l.enabled&&l.column[n],T=f?a(N,{fontSize:"1.mini",fontColor:n==d?"1.clear":"5.translucent",icon:n==d?p=="DESC"?ie:se:ce}):null,v=a(U,{});if(y){let L=h.map(O=>{var A;return(A=O[n])==null?void 0:A.data});L=[...new Set(L)].toASC();let P=l.current[n];if(P){let O=L.filter(C=>!P.includes(C)),A=[];L.forEach(C=>{C&&A.push({value:C,label:a(B,{flexSizing:"auto",children:C})})});let J="BUTTON-"+e.componentId+"-"+n,X=e.componentId+"-"+n,re={sheetID:X,parent:"#"+J,gravityPoint:23,content:_(M,{flexType:"col",border:!0,boxShadow:"3.remark",backgroundColor:"layer.1",borderRadius:1,xcss:{minWidth:12*20,maxWidth:12*30},children:[a(oe,{gap:"1/3",overflow:"auto",padding:"2/3",xcss:{maxHeight:12*30},children:a(I.Checkbox,{icon:!0,value:O,display:"flex",gap:"2/3",override:"force",options:A,hideInput:!0,name:"DTFilter-col-"+n+"-table-"+e.componentId,onUpdateValidValue:C=>{let H=L.filter(ae=>!C.includes(ae)),Z=r({},e);Z.filter.current[n]=H,i(Z)}})}),_(j.Separate,{gap:"2/3",padding:"2/3",horizontalAlign:"right",children:[a(F.Border.S,{isRounded:!0,onClick:()=>{ee.close(X)},children:"\u9589\u3058\u308B"}),a(F.Prime.S,{color:"theme",isRounded:!0,ssEffectsOnActive:"shrink",onClick:()=>{let C=[];P.length||(C=L);let H=r({},e);H.filter.current[n]=C,i(H)},children:"\u5168\u9078\u629E"})]})]})};v=a(B,{className:b("FilterRegion"),children:a(F.Sub.S,{ssSphere:2.5,fontSize:"1.mini",className:b("Filtering_"+!!P.length),id:J,onClick:C=>{C.stopPropagation(),ee.open("custom",re)},children:a(N,{icon:de})})})}}let z={top:!0,bottom:!e.rows.length,left:e.checker?!1:n==0,right:n==e.colLength-1,rowIndex:0,colIndex:n,isBody:!1,isHeader:!0},te=K(z),q=e.cellStylesCallback?e.cellStylesCallback(z):{};o=S(r(r(r(r({},e.cellStyles),te),o),q),{ssPushable:f,xcss:r(r(r({},(w=e.cellStyles)==null?void 0:w.xcss),q.xcss),o.xcss),className:[b("Cell"),e.cellClassName,o.className].join(" ")}),delete o.orderIndex,m.push(a(R.TH,S(r({fontWeight:"2.normal",position:"sticky",ssZIndex:2,top:0},o),{onClick:L=>{if(f){let P=r({},e),O=[n,d===n?p=="ASC"?"DESC":"ASC":s.priority];P.order.current=O,i(P),e.onOrderChanged&&e.onOrderChanged(O)}},children:_(M,{flexType:"row-r",flexWrap:!1,height:1,borderRadius:"inherit",flexCenter:!0,children:[v,_(M,{flexSizing:0,position:"relative",borderRadius:"inherit",gap:"1/2",flexWrap:!1,verticalAlign:"center",horizontalAlign:"center",children:[T,u]})]})}),n))}return a(R.Row,{className:[b("Row"),b("HeadRow")].join(" "),children:m})},Body:t=>{let{val_status:e,PageRows:i}=t,h=[];if(i.forEach((s,l)=>{var m;let d=[...s],p=[];if(e.checker){let c={top:l==0&&!e.head,bottom:l==i.length-1,left:!0,right:!e.colLength,rowIndex:l,colIndex:0,isBody:!0,isHeader:!1},g=K(c),w=e.cellStylesCallback?e.cellStylesCallback(c):{};p.push(a(R.TH,S(r(r(r({unitWidth:4,padding:0,borderRight:!0},e.cellStyles),g),w),{xcss:r(r({},(m=e.cellStyles)==null?void 0:m.xcss),w.xcss),className:[b("Cell"),e.cellClassName].join(" "),children:a(B,{flexCenter:!0,children:a(I.Checker,{label:"",value:s.checked,override:"force",onUpdateValidValue:n=>{let o=e.rows,u=o.findIndex(f=>D.isEqual(f.rowID,s.rowID));u!=-1&&(o[u].checked=n,t.set_status(f=>S(r({},f),{rows:o})))}})})}),-1))}d.forEach((c,g)=>{var v;if(!c)return;let T=c,{type:w="td"}=T,n=$(T,["type"]),o={top:l==0&&!e.head,bottom:l==i.length-1,left:e.checker?!1:g==0,right:g==e.colLength-1,rowIndex:l,colIndex:g,isBody:!0,isHeader:!1},u=K(o),f=e.cellStylesCallback?e.cellStylesCallback(o):{};n=S(r(r(r(r({},e.cellStyles),u),n),f),{xcss:r(r(r({},(v=e.cellStyles)==null?void 0:v.xcss),n.xcss),f.xcss),className:[b("Cell"),e.cellClassName,n.className].join(" ")}),delete n.orderIndex;let y=R[w=="td"?"TD":"TH"];p.push(a(y,r({},n),g))}),h.push(a(R.Row,{className:[b("Row"),b("BodyRow")].join(" "),children:p,onClick:c=>{e.onRowClick&&e.onRowClick(s.rowID,c)}},l))}),!i.length){let s=a(B,{padding:2,fontColor:"4.thin",textAlign:"center",borderTop:"1.thin",children:"\u30C6\u30FC\u30D6\u30EB\u304C\u3042\u308A\u307E\u305B\u3093"});e.noRecords&&(s=a(U,{children:e.noRecords})),h.push(a(R.Row,{className:[b("Row"),b("BodyRow"),b("DataNotFound")].join(" "),children:a(R.TD,{colSpan:e.colLength,className:b("Cell"),children:s})},"dataNotFound"))}return a(U,{children:h})},Core:t=>{let{val_status:e,set_status:i}=t,{searchKeyword:h,filter:s,order:l,paging:d}=e,p=[...e.rows],m=[...e.rows],c=[...e.rows],g=[...e.rows];if(h&&(m=p.filter(o=>(o.__sys4SearchKey||"").match(new RegExp(String(h).escapeRegExChar(),"i"))?1:0),c=[...m],g=[...m]),s.enabled)for(let o=0;o<e.colLength;o++){let u=s.column[o],f=s.current[o];u&&f&&f.length&&(c=c.filter(y=>!f.includes(y[o].data)),g=[...c])}l.enabled&&(l.current[1]=="ASC"?c=c.toASC(l.current[0]+"[orderIndex]"):c=c.toDESC(l.current[0]+"[orderIndex]"),g=[...c]);{let{currentPageIndex:o,rowLength:u}=d;g=[...g].splice((o-1)*u,u)}let w=x.__memoryID+"_"+e.tableID,n={rows:{total:p.length,page:g.length,filtered:c.length},val_status:S(r({},e),{paging:S(r({},e.paging),{pageLength:Math.ceil(c.length/e.paging.rowLength)})}),set_status:i};return Q.update({[w]:{getRowData:()=>{let o=[...p];return l.enabled&&(l.current[1]=="ASC"?o=o.toASC(l.current[0]+"[orderIndex]"):o=o.toDESC(l.current[0]+"[orderIndex]")),o.forEach(u=>{u.currentPage=!1,u.filtered=!1}),g.forEach(u=>{let{rowID:f}=u;o.find(y=>D.isEqual(y.rowID,f)).currentPage=!0}),c.forEach(u=>{let{rowID:f}=u;o.find(y=>D.isEqual(y.rowID,f)).filtered=!0}),o}}}),W(()=>{E.bridge(e.tableID,n)}),a(B,{className:b("TableBase"),children:a(R.Table,{className:b("Table"),children:_(R.Body,{children:[a(x.Header,{val_status:e,set_status:i,KeywordFilterRows:m}),a(x.Body,{val_status:e,set_status:i,PageRows:g})]})})},h)},Propagations:{},DataLeveler:t=>{var e,i;return t=r({},t),t.filter=(e=t.filter)!=null?e:!1,t.filter=Array.from({length:t.colLength}).map((h,s)=>{var l;return D.isBoolean(t.filter)?t.filter:(l=t.filter[s])!=null?l:!1}),t.order=(i=t.order)!=null?i:!0,t.orderPriority=t.orderPriority||"ASC",t.order=Array.from({length:t.colLength}).map((h,s)=>{var l;return D.isBoolean(t.order)?t.order:(l=t.order[s])!=null?l:!0}),t=r({checker:!1,searchKeyword:"",filter:!1,order:!0,defaultOrder:[0,"ASC"]},t),t.rows.forEach((h,s)=>{h.rowID=h.rowID||s;let l=[];h.forEach((d,p)=>{let{data:m,children:c,orderIndex:g}=d;d.orderIndex=D.isExist(g)?String(g):String(m),d.children=c||String(m),l.push(String(d.data))}),h.__sys4SearchKey=l.join("/")}),a(x.StateManager,r({},t))},StateManager:t=>{let{colLength:e,checker:i=!1,searchKeyword:h="",filter:s,order:l,orderPriority:d="ASC",defaultOrder:p=[0,d],pageRowLength:m=30}=t,[c]=Y(G()),g={tableID:t.tableID||c,componentId:c,colLength:e,checker:i,searchKeyword:h,filter:{enabled:s!==!1,column:s,current:Array.from({length:e},()=>[])},order:{enabled:l!==!1,column:l,current:p,priority:t.orderPriority},paging:{rowLength:m,pageLength:Math.ceil(t.rows.length/m),currentPageIndex:1},head:t.head,rows:t.rows,noRecords:t.noRecords,cellStyles:t.cellStyles||{},cellClassName:t.cellClassName||"",cellStylesCallback:t.cellStylesCallback,onRowClick:t.onRowClick,onOrderChanged:t.onOrderChanged},[w,n]=Y(g);const o=()=>{const u=new WeakSet;return(f,y)=>{if(typeof y=="object"&&y!==null){if(u.has(y))return"[Circular Reference]";if(f=="children")return"[React Element]";u.add(y)}return y}};return W(()=>{n(u=>S(r({},u),{rows:g.rows}))},[D.Stringify(g.rows,o())]),W(()=>{n(u=>S(r({},u),{head:g.head}))},[D.Stringify(g.head,o())]),a(x.Core,{val_status:w,set_status:n})}},ge={__memoryID:x.__memoryID,getRowData:t=>{let e=Q.get(x.__memoryID+"_"+t);if(e!=null&&e.getRowData)return e.getRowData()}},V={SearchInput:t=>{let e=E.catch(t.tableID);if(!e)return null;let{val_status:i,set_status:h}=e;return a(I.TextField,{label:"\u691C\u7D22...",clearButton:!0,padding:"2/3",paddingRight:3,rightIcon:a(I.RightIcon,{ssSphere:2,fontColor:"5.translucent",right:"2/3",children:a(N.Search,{})}),value:i.searchKeyword,onUpdateValidValue:s=>{t.onChange(s),D.interval.once(()=>{h(l=>S(r({},l),{paging:S(r({},l.paging),{currentPageIndex:1}),filter:S(r({},l.filter),{current:Array.from({length:l.colLength},()=>[])}),searchKeyword:s}))},200,"InputSearchTime")}})},Info:t=>{let e=E.catch(t.tableID);if(!e)return null;let{val_status:i,set_status:h}=e,s=e.rows.filtered.ratio(e.rows.total)||0;return _(M,{verticalAlign:"baseline",gap:"1/2",fontSize:"1.mini",fontColor:"3.blur",children:[a(le,{fontSize:"4.thirdTitle",fontColor:"theme",children:e.rows.filtered.toLocaleString()}),"/ ",e.rows.total.toLocaleString(),"\u4EF6 (",s,"%)"]})},Paging:t=>{let e=E.catch(t.tableID);if(!e)return null;let{val_status:i,set_status:h}=e,s=[];for(let d=0;d<i.paging.pageLength;d++)s.push({value:d+1,label:(d+1).toString()});const l=d=>{let p=Math.min(Math.max(1,d),i.paging.pageLength),m=r({},i);m.paging.currentPageIndex=p,h(c=>S(r({},c),{paging:S(r({},c.paging),{currentPageIndex:p})}))};return a(I.Select,{emptySelect:!1,padding:["1/3","2/3"],override:"force",gap:0,leftIcon:a(I.LeftIcon,{xcss:{left:2,pointerEvents:"all"},children:a(F.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(i.paging.currentPageIndex==1){l(i.paging.pageLength);return}l(i.paging.currentPageIndex-1)},children:a(N.ChevronLeft,{})})}),rightIcon:a(I.RightIcon,{xcss:{right:2,pointerEvents:"all"},children:a(F.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(i.paging.currentPageIndex==i.paging.pageLength){l(1);return}l(i.paging.currentPageIndex+1)},children:a(N.ChevronRight,{})})}),options:s.map(d=>({value:d.value,label:_(j.Left,{gap:"1/3",verticalAlign:"baseline",children:[d.label,_(ne.Micro,{fontColor:"4.thin",children:["/ ",i.paging.pageLength]})]})})),value:i.paging.currentPageIndex,onUpdateValidValue:d=>{l(d)}})},RowLength:t=>{let e=E.catch(t.tableID);if(!e)return null;let{val_status:i,set_status:h}=e,s=i.paging.rowLength,l=0,d=t.lengthSelect.map(p=>(l|=+(p==s),{value:p,label:p.toString()}));return l||d.push({value:s,label:s.toString()}),a(j.Center,{gap:"1/2",children:a(I.Select,{emptySelect:!1,override:"force",padding:"1/3",paddingLeft:3,paddingRight:2,pickerStyles:{xcss:{minWidth:12*9}},pickerPosition:4,value:i.paging.rowLength,leftIcon:a(I.LeftIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{left:6},children:"\u8868\u793A"}),rightIcon:a(I.RightIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{right:6},children:"\u4EF6"}),options:d.toASC("value"),onUpdateValidValue:p=>{h(m=>S(r({},m),{paging:{rowLength:Number(p),currentPageIndex:1,pageLength:Math.ceil(e.rows.filtered/Number(p))}}))}})})}},he=t=>a(ue,S(r({},t),{type:"data",JSXChildren:x.DataLeveler})),k=he;k.__memoryID=x.__memoryID,k.getRowData=ge.getRowData,k.Info=V.Info,k.Paging=V.Paging,k.RowLength=V.RowLength,k.SearchInput=V.SearchInput;export{k as Data,k as default};
|
|
1
|
+
import{b as r,c as S,d as $}from"../../chunk-C5N2D3ZX.js";import{Fragment as U,jsx as a,jsxs as L}from"react/jsx-runtime";import D,{UUID as G,useStore as Q}from"jmini";import{useState as Y,useEffect as W}from"react";import{useRemote as E}from"../../@utils";import{Box as B,Flex as M,FAI as N,Span as le,Column as oe}from"../../atoms";import{Literal as ne,Row as j}from"../../mols";import{Button as F}from"../Button";import ee from"../Sheet";import I from"../Input";import{faArrowUp as se}from"@fortawesome/free-solid-svg-icons/faArrowUp";import{faArrowDown as ie}from"@fortawesome/free-solid-svg-icons/faArrowDown";import{faArrowRight as ce}from"@fortawesome/free-solid-svg-icons/faArrowRight";import{faFilter as de}from"@fortawesome/free-solid-svg-icons/faFilter";import R from"./Parts";import ue from"./Wrapper";import{DefaultCellSystemAdjustingStyles as K}from"./cellStyling";import{TableClasses as b}from"../../@styles/componentClasses";const x={__memoryID:G(),Header:t=>{var g,w;let{val_status:e,set_status:s,KeywordFilterRows:h}=r({},t),{order:i,filter:l}=e,[d,p]=i.current,m=[],c=[...e.head];if(e.checker){let n={top:!0,bottom:!e.rows.length,left:!0,right:!e.colLength,rowIndex:0,colIndex:0,isBody:!1,isHeader:!0},o=K(n),u=e.cellStylesCallback?e.cellStylesCallback(n):{};m.push(a(R.TH,S(r(r(r({fontWeight:"2.normal",position:"sticky",ssZIndex:2,top:0,unitWidth:4,padding:0},e.cellStyles),o),u),{xcss:r(r({},(g=e.cellStyles)==null?void 0:g.xcss),u.xcss),className:[b("Cell"),e.cellClassName].join(" "),children:a(B,{flexCenter:!0,children:a(I.Checker,{label:"",value:!1,onUpdateValidValue:f=>{let y=e.rows;y.forEach(T=>{T.checked=f}),s(S(r({},e),{rows:y}))}})})}),-1))}for(let n=0;n<e.colLength;n++){let o=c[n];if(!o)continue;let u=o.children||o.data,f=i.enabled&&i.column[n],y=l.enabled&&l.column[n],T=f?a(N,{fontSize:"1.mini",fontColor:n==d?"1.clear":"5.translucent",icon:n==d?p=="DESC"?ie:se:ce}):null,A=a(U,{});if(y){let _=h.map(O=>{var v;return(v=O[n])==null?void 0:v.data});_=[...new Set(_)].toASC();let P=l.current[n];if(P){let O=_.filter(C=>!P.includes(C)),v=[];_.forEach(C=>{C&&v.push({value:C,label:a(B,{flexSizing:"auto",children:C})})});let J="BUTTON-"+e.componentId+"-"+n,X=e.componentId+"-"+n,re={sheetID:X,parent:"#"+J,gravityPoint:23,content:L(M,{flexType:"col",border:!0,boxShadow:"3.remark",backgroundColor:"layer.1",borderRadius:1,xcss:{minWidth:12*20,maxWidth:12*30},children:[a(oe,{gap:"1/3",overflow:"auto",padding:"2/3",xcss:{maxHeight:12*30},children:a(I.Checkbox,{icon:!0,value:O,display:"flex",gap:"2/3",override:"force",options:v,hideInput:!0,name:"DTFilter-col-"+n+"-table-"+e.componentId,onUpdateValidValue:C=>{let H=_.filter(ae=>!C.includes(ae)),Z=r({},e);Z.filter.current[n]=H,s(Z)}})}),L(j.Separate,{gap:"2/3",padding:"2/3",horizontalAlign:"right",children:[a(F.Border.S,{isRounded:!0,onClick:()=>{ee.close(X)},children:"\u9589\u3058\u308B"}),a(F.Prime.S,{color:"theme",isRounded:!0,ssEffectsOnActive:"shrink",onClick:()=>{let C=[];P.length||(C=_);let H=r({},e);H.filter.current[n]=C,s(H)},children:"\u5168\u9078\u629E"})]})]})};A=a(B,{className:b("FilterRegion"),children:a(F.Sub.S,{ssSphere:2.5,fontSize:"1.mini",className:b("Filtering_"+!!P.length),id:J,onClick:C=>{C.stopPropagation(),ee.open("custom",re)},children:a(N,{icon:de})})})}}let z={top:!0,bottom:!e.rows.length,left:e.checker?!1:n==0,right:n==e.colLength-1,rowIndex:0,colIndex:n,isBody:!1,isHeader:!0},te=K(z),q=e.cellStylesCallback?e.cellStylesCallback(z):{};o=S(r(r(r(r({},e.cellStyles),te),o),q),{ssPushable:f,xcss:r(r(r({},(w=e.cellStyles)==null?void 0:w.xcss),q.xcss),o.xcss),className:[b("Cell"),e.cellClassName,o.className].join(" ")}),delete o.orderIndex,m.push(a(R.TH,S(r({fontWeight:"2.normal",position:"sticky",ssZIndex:2,top:0},o),{onClick:_=>{if(f){let P=r({},e),O=[n,d===n?p=="ASC"?"DESC":"ASC":i.priority];P.order.current=O,s(P),e.onOrderChanged&&e.onOrderChanged(O)}},children:L(M,{flexType:"row-r",flexWrap:!1,height:1,borderRadius:"inherit",flexCenter:!0,children:[A,L(M,{flexSizing:0,position:"relative",borderRadius:"inherit",gap:"1/2",flexWrap:!1,verticalAlign:"center",horizontalAlign:"center",children:[T,u]})]})}),n))}return a(R.Row,{className:[b("Row"),b("HeadRow")].join(" "),children:m})},Body:t=>{let{val_status:e,PageRows:s}=t,h=[];if(s.forEach((i,l)=>{var m;let d=[...i],p=[];if(e.checker){let c={top:l==0&&!e.head,bottom:l==s.length-1,left:!0,right:!e.colLength,rowIndex:l,colIndex:0,isBody:!0,isHeader:!1},g=K(c),w=e.cellStylesCallback?e.cellStylesCallback(c):{};p.push(a(R.TH,S(r(r(r({unitWidth:4,padding:0,borderRight:!0},e.cellStyles),g),w),{xcss:r(r({},(m=e.cellStyles)==null?void 0:m.xcss),w.xcss),className:[b("Cell"),e.cellClassName].join(" "),children:a(B,{flexCenter:!0,children:a(I.Checker,{label:"",value:i.checked,override:"force",onUpdateValidValue:n=>{let o=e.rows,u=o.findIndex(f=>D.isEqual(f.rowID,i.rowID));u!=-1&&(o[u].checked=n,t.set_status(f=>S(r({},f),{rows:o})))}})})}),-1))}d.forEach((c,g)=>{var A;if(!c)return;let T=c,{type:w="td"}=T,n=$(T,["type"]),o={top:l==0&&!e.head,bottom:l==s.length-1,left:e.checker?!1:g==0,right:g==e.colLength-1,rowIndex:l,colIndex:g,isBody:!0,isHeader:!1},u=K(o),f=e.cellStylesCallback?e.cellStylesCallback(o):{};n=S(r(r(r(r({},e.cellStyles),u),n),f),{xcss:r(r(r({},(A=e.cellStyles)==null?void 0:A.xcss),n.xcss),f.xcss),className:[b("Cell"),e.cellClassName,n.className].join(" ")}),delete n.orderIndex;let y=R[w=="td"?"TD":"TH"];p.push(a(y,r({},n),g))}),h.push(a(R.Row,{className:[b("Row"),b("BodyRow")].join(" "),children:p,onClick:c=>{e.onRowClick&&e.onRowClick(i.rowID,c)}},l))}),!s.length){let i=a(B,{padding:2,fontColor:"4.thin",textAlign:"center",borderTop:"1.thin",children:"\u30C6\u30FC\u30D6\u30EB\u304C\u3042\u308A\u307E\u305B\u3093"});e.noRecords&&(i=a(U,{children:e.noRecords})),h.push(a(R.Row,{className:[b("Row"),b("BodyRow"),b("DataNotFound")].join(" "),children:a(R.TD,{colSpan:e.colLength,className:b("Cell"),children:i})},"dataNotFound"))}return a(U,{children:h})},Core:t=>{let{val_status:e,set_status:s}=t,{searchKeyword:h,filter:i,order:l,paging:d}=e,p=[...e.rows],m=[...e.rows],c=[...e.rows],g=[...e.rows];if(h&&(m=p.filter(o=>(o.__sys4SearchKey||"").match(new RegExp(String(h).escapeRegExChar(),"i"))?1:0),c=[...m],g=[...m]),i.enabled)for(let o=0;o<e.colLength;o++){let u=i.column[o],f=i.current[o];u&&f&&f.length&&(c=c.filter(y=>!f.includes(y[o].data)),g=[...c])}l.enabled&&(l.current[1]=="ASC"?c=c.toASC(l.current[0]+"[orderIndex]"):c=c.toDESC(l.current[0]+"[orderIndex]"),g=[...c]);{let{currentPageIndex:o,rowLength:u}=d;g=[...g].splice((o-1)*u,u)}let w=x.__memoryID+"_"+e.tableID,n={rows:{total:p.length,page:g.length,filtered:c.length},val_status:S(r({},e),{paging:S(r({},e.paging),{pageLength:Math.ceil(c.length/e.paging.rowLength)})}),set_status:s};return Q.update({[w]:{getRowData:()=>{let o=[...p];return l.enabled&&(l.current[1]=="ASC"?o=o.toASC(l.current[0]+"[orderIndex]"):o=o.toDESC(l.current[0]+"[orderIndex]")),o.forEach(u=>{u.currentPage=!1,u.filtered=!1}),g.forEach(u=>{let{rowID:f}=u;o.find(y=>D.isEqual(y.rowID,f)).currentPage=!0}),c.forEach(u=>{let{rowID:f}=u;o.find(y=>D.isEqual(y.rowID,f)).filtered=!0}),o}}}),W(()=>{E.bridge(e.tableID,n)}),a(B,{className:b("TableBase"),children:a(R.Table,{className:b("Table"),children:L(R.Body,{children:[a(x.Header,{val_status:e,set_status:s,KeywordFilterRows:m}),a(x.Body,{val_status:e,set_status:s,PageRows:g})]})})},h)},Propagations:{},DataLeveler:t=>{var e,s;return t=r({},t),t.filter=(e=t.filter)!=null?e:!1,t.filter=Array.from({length:t.colLength}).map((h,i)=>{var l;return D.isBoolean(t.filter)?t.filter:(l=t.filter[i])!=null?l:!1}),t.order=(s=t.order)!=null?s:!0,t.orderPriority=t.orderPriority||"ASC",t.order=Array.from({length:t.colLength}).map((h,i)=>{var l;return D.isBoolean(t.order)?t.order:(l=t.order[i])!=null?l:!0}),t=r({checker:!1,searchKeyword:"",filter:!1,order:!0,defaultOrder:[0,"ASC"]},t),t.rows.forEach((h,i)=>{h.rowID=h.rowID||i;let l=[];h.forEach((d,p)=>{let{data:m,children:c,orderIndex:g}=d;d.orderIndex=D.isExist(g)?String(g):String(m),d.children=c||String(m),l.push(String(d.data))}),h.__sys4SearchKey=l.join("/")}),a(x.StateManager,r({},t))},StateManager:t=>{let{colLength:e,checker:s=!1,searchKeyword:h="",filter:i,order:l,orderPriority:d="ASC",defaultOrder:p=[0,d],pageRowLength:m=30}=t,[c]=Y(G()),g={tableID:t.tableID||c,componentId:c,colLength:e,checker:s,searchKeyword:h,filter:{enabled:i!==!1,column:i,current:Array.from({length:e},()=>[])},order:{enabled:l!==!1,column:l,current:p,priority:t.orderPriority},paging:{rowLength:m,pageLength:Math.ceil(t.rows.length/m),currentPageIndex:1},head:t.head,rows:t.rows,noRecords:t.noRecords,cellStyles:t.cellStyles||{},cellClassName:t.cellClassName||"",cellStylesCallback:t.cellStylesCallback,onRowClick:t.onRowClick,onOrderChanged:t.onOrderChanged},[w,n]=Y(g);const o=()=>{const u=new WeakSet;return(f,y)=>{if(typeof y=="object"&&y!==null){if(u.has(y))return"[Circular Reference]";if(f=="children")return"[React Element]";u.add(y)}return y}};return W(()=>{n(u=>S(r({},u),{rows:g.rows}))},[D.Stringify(g.rows,o())]),W(()=>{n(u=>S(r({},u),{head:g.head}))},[D.Stringify(g.head,o())]),a(x.Core,{val_status:w,set_status:n})}},ge={__memoryID:x.__memoryID,getRowData:t=>{let e=Q.get(x.__memoryID+"_"+t);if(e!=null&&e.getRowData)return e.getRowData()}},V={SearchInput:t=>{let e=E.catch(t.tableID);if(!e)return null;let{val_status:s,set_status:h}=e;return a(I.TextField,{label:"\u691C\u7D22...",clearButton:!0,padding:"2/3",paddingRight:3,rightIcon:a(I.RightIcon,{ssSphere:2,fontColor:"5.translucent",right:"2/3",children:a(N.Search,{})}),value:s.searchKeyword,onUpdateValidValue:i=>{t.onChange(i),D.interval.once(()=>{h(l=>S(r({},l),{paging:S(r({},l.paging),{currentPageIndex:1}),filter:S(r({},l.filter),{current:Array.from({length:l.colLength},()=>[])}),searchKeyword:i}))},200,"InputSearchTime")}})},Info:t=>{let e=E.catch(t.tableID);if(!e)return null;let s=e.rows.filtered.toRate(e.rows.total)||0;return L(M,{verticalAlign:"baseline",gap:"1/2",fontSize:"1.mini",fontColor:"3.blur",children:[a(le,{fontSize:"4.thirdTitle",fontColor:"theme",children:e.rows.filtered.toLocaleString()}),"/ ",e.rows.total.toLocaleString(),"\u4EF6 (",s,"%)"]})},Paging:t=>{let e=E.catch(t.tableID);if(!e)return null;let{val_status:s,set_status:h}=e,i=[];for(let d=0;d<s.paging.pageLength;d++)i.push({value:d+1,label:(d+1).toString()});const l=d=>{let p=Math.min(Math.max(1,d),s.paging.pageLength),m=r({},s);m.paging.currentPageIndex=p,h(c=>S(r({},c),{paging:S(r({},c.paging),{currentPageIndex:p})}))};return a(I.Select,{emptySelect:!1,padding:["1/3","2/3"],override:"force",gap:0,leftIcon:a(I.LeftIcon,{xcss:{left:2,pointerEvents:"all"},children:a(F.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(s.paging.currentPageIndex==1){l(s.paging.pageLength);return}l(s.paging.currentPageIndex-1)},children:a(N.ChevronLeft,{})})}),rightIcon:a(I.RightIcon,{xcss:{right:2,pointerEvents:"all"},children:a(F.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(s.paging.currentPageIndex==s.paging.pageLength){l(1);return}l(s.paging.currentPageIndex+1)},children:a(N.ChevronRight,{})})}),options:i.map(d=>({value:d.value,label:L(j.Left,{gap:"1/3",verticalAlign:"baseline",children:[d.label,L(ne.Micro,{fontColor:"4.thin",children:["/ ",s.paging.pageLength]})]})})),value:s.paging.currentPageIndex,onUpdateValidValue:d=>{l(d)}})},RowLength:t=>{let e=E.catch(t.tableID);if(!e)return null;let{val_status:s,set_status:h}=e,i=s.paging.rowLength,l=0,d=t.lengthSelect.map(p=>(l|=+(p==i),{value:p,label:p.toString()}));return l||d.push({value:i,label:i.toString()}),a(j.Center,{gap:"1/2",children:a(I.Select,{emptySelect:!1,override:"force",padding:"1/3",paddingLeft:3,paddingRight:2,pickerStyles:{xcss:{minWidth:12*9}},pickerPosition:4,value:s.paging.rowLength,leftIcon:a(I.LeftIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{left:6},children:"\u8868\u793A"}),rightIcon:a(I.RightIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{right:6},children:"\u4EF6"}),options:d.toASC("value"),onUpdateValidValue:p=>{h(m=>S(r({},m),{paging:{rowLength:Number(p),currentPageIndex:1,pageLength:Math.ceil(e.rows.filtered/Number(p))}}))}})})}},he=t=>a(ue,S(r({},t),{type:"data",JSXChildren:x.DataLeveler})),k=he;k.__memoryID=x.__memoryID,k.getRowData=ge.getRowData,k.Info=V.Info,k.Paging=V.Paging,k.RowLength=V.RowLength,k.SearchInput=V.SearchInput;export{k as Data,k as default};
|
package/dist/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "amotify",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.20",
|
|
4
4
|
"description": "UI Component for React,NextJS,esbuild",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "run-p clean build:*",
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"@fortawesome/free-solid-svg-icons": "^7.2.0",
|
|
91
91
|
"@fortawesome/react-fontawesome": "^3.3.0",
|
|
92
92
|
"dotenv": "^17.0.1",
|
|
93
|
-
"jmini": "^0.0.
|
|
93
|
+
"jmini": "^0.0.123",
|
|
94
94
|
"react": "^19.2.3"
|
|
95
95
|
},
|
|
96
96
|
"devDependencies": {
|