amotify 0.3.19 → 0.3.21

package/UI_MAP.md

@@ -0,0 +1,512 @@
+# amotify UI Map
+
+> AIがコンポーネントのAPIを素早く把握するための参照ファイル。  
+> 型の詳細は `dist/` 配下の `.d.ts` を参照。
+
+---
+
+## インポート
+
+```ts
+import { Button, Input, Sheet, ... } from 'amotify'
+```
+
+---
+
+## 共通型
+
+| 型 | 値 |
+|---|---|
+| `Themecolor` | `'comun' \| 'leaf' \| 'heart' \| 'droplet' \| 'brick' \| 'flower' \| 'lip' \| 'wine' \| 'theater' \| 'bat' \| 'poizon' \| 'ufo' \| 'moon' \| 'rain' \| 'gem' \| 'drizzle' \| 'lemon' \| 'pizza' \| 'coffee' \| 'galaxy' \| ...60+` |
+| `Darkmode` | `'light' \| 'auto' \| 'dark' \| 'dim'` |
+| `Roundness` | `0 \| 1 \| 2 \| 3 \| 4 \| 5` |
+| `Device` | `'' \| 'windows' \| 'android' \| 'iPhone' \| 'iPad' \| 'macOSX'` |
+| `Browser` | `'' \| 'chrome' \| 'firefox' \| 'safari' \| 'opera' \| 'ie' \| 'edge'` |
+
+---
+
+## StyleProps（スタイルプロパティ）
+
+すべてのコンポーネントは `StyleProps.States` を継承。`xcss` で生のCSSも渡せる。
+
+| namespace | 主なプロパティ |
+|---|---|
+| **Pargins** | `margin` `marginTop/Right/Bottom/Left` `padding` `paddingTop/Right/Bottom/Left` |
+| **Borders** | `border` `borderTop/Right/Bottom/Left` `borderWidth` `borderColor` `borderStyle` `borderRadius` |
+| **Fonts** | `fontColor` `fontSize` `fontWeight` `fontHeight` `textAlign` `textDecoration` |
+| **FlexGrids** | `flexSizing` `flexWrap` `flexCenter` `flexType` `flexChilds` `flexGrid` `verticalAlign` `horizontalAlign` `gridCenter` `gridCols` |
+| **Sizes** | `width` `height` `maxWidth` `minWidth` `maxHeight` `minHeight` `unitWidth` `unitHeight` |
+| **StyleSets** | `ssCardBox` `ssPushable` `ssSphere` `ssSquare` `ssAbsoluteCovered` `ssTextEllipsis` `ssNowrapText` `ssHiddenOnBreak` `ssEffectsOnActive` `isRounded` `isSquared` |
+| **Other** | `backgroundColor` `gradients` `boxShadow` `display` `gap` `overflow` `position` `top/right/bottom/left` `opacity` `transition` `xcss` `UnderBreakPointStyles` |
+
+**単位 (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`
+
+**色 (UniColors):** `'inherit' \| 'theme' \| 'posi' \| 'nega' \| 'warn' \| 'white' \| 'black' \| 'dark' \| Themecolor`
+
+**レイヤー色:** `'layer.0' 〜 'layer.6'`
+
+---
+
+## atoms/
+
+### Box
+汎用コンテナ。全HTMLタグをジェネリクスで指定可。
+```ts
+<Box htmlTag="section" flexType="col" padding={2}>...</Box>
+```
+
+### Flex / FlexBr / FlexMargin / Column / Span / P
+Box の省略バリアント。それぞれ flex-row / break付き / margin付き / flex-col / span / p。
+
+### FAI (Font Awesome Icon)
+```ts
+<FAI icon={faUser} fontSize="3.paragraph" />
+// ショートカット: FAI.User / FAI.Search / FAI.Check / FAI.Trash / FAI.Plus / FAI.Gear ...
+```
+
+### Img
+```ts
+<Img src="..." alt="..." showExpand />
+```
+
+### Card
+- Variants: `Card` `Card.Border` `Card.Plain` `Card.Cloud` `Card.Shadow`
+- `jsxElement` でラップ要素を変更可
+
+### Grid
+```ts
+<Grid gridCols={3} gap={2}>...</Grid>
+<Grid.Layout gridTemplateColumns="..." gridTemplateRows="..." gridChildTemplates={[...]} />
+```
+
+### Placeholder
+```ts
+<Placeholder backgroundColor="cloud" width={1} height={3} />
+```
+
+### Logo
+- Sizes: `S \| R \| L \| 2L \| 3L` / Colors: `normal \| white`
+- Sub: `Logo.Brands.MingooLogoH` `Logo.Brands.Google` `Logo.Brands.LINE` ...
+
+### CacheRender
+```ts
+<CacheRender params={deps}>{children}</CacheRender>
+```
+
+---
+
+## fn/
+
+### Button / Label / Anchor
+
+**Tones:** `plain \| link \| normal \| border \| prime \| sub \| clear \| fillToBorder \| borderToFill`  
+**Colors:** `plain \| theme \| posi \| nega \| warn \| cloud \| trans \| white` (Anchor は `+layer`)  
+**Sizes:** `plain \| xsmall \| small \| regular \| large`
+
+```ts
+// tone + color + size を個別指定
+<Button tone="prime" color="theme" size="regular">送信</Button>
+
+// 省略バリアント (Tone.Size の形式)
+<Button.Prime.R>送信</Button.Prime.R>
+<Button.Border.S>キャンセル</Button.Border.S>
+
+// フォーム送信
+<Button onFormSubmit={['formName', ({ body, isValid, serialLock }) => { ... }]} />
+```
+
+- `isLocked` `isActive` `isActiveStyles` でロック/アクティブ制御
+- Label は `htmlFor` 追加 / Anchor は `href` `newTab` `sync` `download` 追加
+
+---
+
+### Input（全フォーム入力）
+
+**共通props (CoreInput):**
+```ts
+name, form, componentId, required, enableFormSubmit, showInitValidation,
+onValidate, onUpdateValue, onUpdateValidValue, onUserAction,
+override: 'never' (default)
+```
+
+**onValidate シグネチャ:**
+```ts
+(value: T, eventType: 'init'|'update'|'update.remote'|'override'|'refresh', opt: Status)
+  => Promise<{ ok: boolean; notice?: { type: 'valid'|'invalid'|'warn'; label: ReactElement }[] }>
+```
+
+**tone (BoxTone):** `'border' \| 'cloud' \| 'bottomBorder' \| 'plain'`
+
+---
+
+#### Input.TextField
+```ts
+<Input.TextField
+  restrict="email"  // 'text'|'katakana'|'hankaku.katakana'|'number'|'digitNumber'|'tel'|'email'|'url'|'fileName'|'password'|'postal'|'creditCard'|'concealed'
+  multiline autoHeight maxLength={200}
+  clearButton leftIcon={<FAI.Search />}
+/>
+// バリアント
+<Input.TextField.Email />  <Input.TextField.Tel />  <Input.TextField.Password />
+<Input.TextField.Postal />  <Input.TextField.Money.JPY />
+```
+
+#### Input.Select
+```ts
+<Input.Select
+  options={[{ value: 'a', label: <>A</> }]}
+  pickerPosition={1}  // 1|2|3|4
+  nativePicker
+/>
+```
+
+#### Input.Autocomplete
+```ts
+<Input.Autocomplete
+  options={[...]}
+  multiSelect
+  onDynamicSearchOptions={async (keyword) => [...]}
+  onSelectorRender={({ option, isSelected, onAdd }) => <div />}
+/>
+```
+
+#### Input.Drum
+```ts
+<Input.Drum options={[{ value: 1, label: <>1月</> }, null, ...]} isHorizontal />
+```
+
+#### Input.Radio / Input.Checkbox / Input.List
+```ts
+<Input.Radio options={[{ value: 'a', label: <>A</> }]} tone="border" />
+// Variants: .Normal .Border .Cloud .Simple .Vivid
+<Input.Checkbox options={[...]} />
+```
+
+#### Input.Checker
+```ts
+<Input.Checker label={<>同意する</>} value={true} />
+```
+
+#### Input.Segmented
+```ts
+<Input.Segmented options={[...]} />
+// Variants: .Cloud .CloudTheme .CloudMono .Border .BorderVivid .Bottomline
+```
+
+#### Input.Slider
+```ts
+<Input.Slider min={0} max={100} step={1} color="theme" legends />
+<Input.Slider.Range min={0} max={100} step={1} />
+// Variants: .Small .Medium .Large / .Range.Small .Range.Medium .Range.Large
+```
+
+#### Input.Switch
+```ts
+<Input.Switch size="regular" color="theme" isApply />
+// Variants: .S .R .L
+```
+
+#### Input.Time
+```ts
+<Input.Time.Date value="2024-01-01" min="2020-01-01" />
+<Input.Time.Clock />  <Input.Time.Week />  <Input.Time.Month />  <Input.Time.Year />
+<Input.Time.Locale.JP.WarekiDate />
+<Input.Time.Periods.Date value={['2024-01-01', '2024-12-31']} />
+```
+
+#### Input.Filer
+```ts
+<Input.Filer accept="image" limit={5} isNameEditable />
+// プログラム操作
+Input.Filer.fn.openDialog({ accept: 'image', multiple: true, onChange: (files) => {} })
+```
+
+#### Input.Segmented / Input.Color / Input.Contenteditable / Input.DigitCharacters
+```ts
+<Input.Color />
+<Input.Contenteditable />
+<Input.DigitCharacters />
+```
+
+#### Input.CollectForm
+フォームグループのラッパー。`form` 属性でフォーム名を揃える。
+
+---
+
+### Sheet（モーダル・ドロワー）
+
+```ts
+// 表示 (Wrapper をルートに配置必須)
+Sheet.Wrapper()  // ルートに一度だけ配置
+
+Sheet.open('bottomCenter', {
+  content: <MyContent />,
+  size: 'R',  // 'XS'|'S'|'R'|'L'|'2L'|'3L'|'MAX'
+  sheetID: 'mySheet',
+  backgroundEffect: true,
+  closeAtAroundClick: true,
+  closeAtEscapeKeyDown: true,
+  closeAtSwipeDown: true,
+})
+
+Sheet.close('mySheet')
+Sheet.closeAll()
+Sheet.update('mySheet', { size: 'L' })
+Sheet.image(params, src)  // 画像表示ショートカット
+
+// Type: 'topLeft'|'topCenter'|'topRight'|'middleLeft'|'middleCenter'|'middleRight'
+//       'bottomLeft'|'bottomCenter'|'bottomRight'
+//       'drawer.left'|'drawer.right'|'drawer.bottom'|'custom'
+```
+
+---
+
+### Snackbar（トースト通知）
+
+```ts
+Snackbar.Wrapper()  // ルートに配置
+
+Snackbar.add({ children: <>保存しました</>, secondsToClose: 3, snackID: 'save' })
+Snackbar.add({ customChildren: ({ close }) => <div onClick={close}>✕</div> })
+Snackbar.remove('save')
+Snackbar.removeALL()
+```
+
+---
+
+### Tooltips
+
+```ts
+Tooltips.open({ event, content: <MyTip />, tipsID: 'tip1', nextToCursor: true })
+Tooltips.close('tip1')
+Tooltips.closeALL()
+Tooltips.notice(<>エラー</>, { closeToSeconds: 5 })
+Tooltips.Body  // ツールチップ内のコンテナ
+```
+
+---
+
+### Table / DataGrid
+
+**Table:** `Table.Normal` / `Table.Data` (ソート・フィルタ・選択・ドラッグ付き)
+
+**DataGrid:**
+```ts
+<DataGrid
+  header={[{ key: 'name', label: <>名前</>, sortable: 1, filterable: true }]}
+  body={[{ name: { data: '田中' } }]}
+  footer={{ name: { data: '合計' } }}
+  tone="border"  // 'border'|'border.vertical'|'border.horizontal'|false
+  onSelected={(rows) => {}}
+  onSorted={(col, sort) => {}}
+/>
+// 付属コンポーネント
+<DataGrid.SearchInput datagridID="id" />
+<DataGrid.Paging datagridID="id" />
+<DataGrid.RowCount datagridID="id" options={[10, 25, 50]} />
+<DataGrid.Info datagridID="id" />
+// メソッド
+DataGrid.getBodyRows('id')
+DataGrid.reset('id')
+DataGrid.refreshBody('id')
+```
+
+---
+
+### Loader
+
+```ts
+Loader.Wrapper()  // ルートに配置
+
+<Loader.Theme.R />  // Color.Size の形式
+// Colors: Theme / Posi / Nega / Warn / White / Cloud
+// Sizes: S / R / L / XL / MAX
+
+Loader.fn.corner.active()   // コーナーローダー表示
+Loader.fn.corner.stop()
+Loader.fn.mini.active('id')  // インラインローダー表示
+Loader.fn.mini.stop('id')
+Loader.fn.stopALL()
+```
+
+---
+
+### RootViewController（アプリシェル）
+
+```ts
+<RootViewController.Base
+  topNavigation={<RootViewController.TopNavigation>...</RootViewController.TopNavigation>}
+  footerNavigation={<RootViewController.FooterNavigation>...</RootViewController.FooterNavigation>}
+  sideNavigation={<RootViewController.SideNavigation>...</RootViewController.SideNavigation>}
+/>
+<RootViewController.Comps.Button path="/home" pathGroup={['/home', /^\/sub/]}>
+  ホーム
+</RootViewController.Comps.Button>
+
+// 計測値
+RootViewController.fn.viewHeight / viewWidth / contentHeight / contentWidth
+RootViewController.fn.topNavHeight / footerNavHeight / safeAreaTop / safeAreaBottom
+```
+
+---
+
+### PageViewController
+
+```ts
+<PageViewController viewIndex={0} views={[<PageA />, <PageB />]} />
+```
+
+---
+
+### SwipeView
+
+```ts
+<SwipeView
+  options={{ loop: true, autoSwipems: 3000, visibilitySurroundSlide: true }}
+  onSlideCallback={(idx, eventType) => {}}
+>
+  {slides}
+</SwipeView>
+```
+
+---
+
+### TabBar
+
+```ts
+<TabBar
+  tabIndex={0}
+  tabs={[{ label: 'タブ1' }, { label: 'タブ2' }]}
+  onTabChange={(idx) => {}}
+/>
+```
+
+---
+
+### Plate
+
+```ts
+<Plate size="R">...</Plate>
+// Sizes: 'MIN'|'XS'|'S'|'R'|'L'|'XL'|'MAX'
+```
+
+---
+
+### Effect
+
+```ts
+<Ripple>クリック要素</Ripple>
+<Pudding>バウンス要素</Pudding>
+<FadeIn animationTime={300} animationDelay={100}>...</FadeIn>
+<FadeUp>...</FadeUp>
+```
+
+---
+
+### Cropper
+
+```ts
+<Cropper
+  aspectRatio="16:9"  // '1:1'|'16:9'|'9:16'|'4:3'|'3:4'|'3:1'|'1:2'|[w,h]
+  onProcessFinished={(files) => {}}
+/>
+```
+
+---
+
+## mols/
+
+### Accordion
+```ts
+<Accordion defaultOpen accordionID="acc1" slideAnimation="fast" onToggleEvent={(open) => {}}>
+  コンテンツ
+</Accordion>
+Accordion.fn.open('acc1') / .close('acc1') / .toggle('acc1') / .isOpen('acc1')
+```
+
+### Literal（見出し・テキスト）
+```ts
+<Literal.Title>タイトル</Literal.Title>
+<Literal.SubTitle />  <Literal.ThirdTitle />  <Literal.Paragraph />
+<Literal.Description />  <Literal.Mini />  <Literal.Micro />
+<Literal.NowrapSpan />
+```
+
+### List / ListItem / Row
+```ts
+// レイアウトヘルパー
+<List.Center>...</List.Center>  <List.Left />  <List.Right />  <List.Separate />
+<Row.Center />  <Row.Left />  <Row.Right />  <Row.Separate />
+```
+
+### LinkifyText
+```ts
+<LinkifyText text="URLを含むテキスト https://example.com" />
+```
+
+### MarkerPen
+テキスト中のキーワードをハイライト表示。
+
+---
+
+## @utils/
+
+### Config
+```ts
+Config.launch({ themeColor: 'comun', darkMode: 'light', roundness: 2 })
+Config.get()          // 現在の設定取得
+Config.update.themeColor('heart')
+Config.update.darkMode('dark')
+Config.update.roundness(3)
+Config.get().screen.isBreakpoint()  // レスポンシブ判定
+```
+
+### pageRouter
+```ts
+pageRouter.push('/path')          // 遷移
+pageRouter.push('/path', true)    // 新タブ
+pageRouter.back()
+pageRouter.open('https://...')    // 外部URL
+pageRouter.pushSync('/path')      // 同期遷移
+pageRouter.pushAsync('/path')     // 非同期遷移
+```
+
+### useRemote（コンポーネント間通信）
+```ts
+// 送信
+useRemote.bridge('channelKey', { data: '...' })
+// 受信 (useEffect内など)
+const msg = useRemote.catch<MyType>('channelKey')
+```
+
+### useRouterEffect
+```ts
+useRouterEffect({ beforeCB: () => {}, afterCB: () => {}, afterFirstCB: () => {} })
+```
+
+### useUpdateEffect
+マウント時をスキップする `useEffect`。
+
+### dragEffect
+```ts
+// ドラッグ開始
+dragEffect.Start('itemType', { startEvent, dragElement }, ({ idx, end }) => {})
+// ドロップエリア
+<dragEffect.DropArea dragInfo={{ type: 'itemType', marker: 'bottom' }}>...</dragEffect.DropArea>
+<dragEffect.DropSign dragInfo={{ type: 'itemType' }} />
+dragEffect.AutoScroll(event)
+```
+
+### ThemeColors / ColorRecords
+```ts
+ThemeColors.comun.hex          // '#...'
+ThemeColors.heart.alfa(0.5)    // 'rgba(..., 0.5)'
+ColorRecords                   // { name: Themecolor, hex: string, isBrand: boolean }[]
+```
+
+### LaunchReactApp
+```ts
+<LaunchReactApp inlineCSS isRootPage>
+  <App />
+</LaunchReactApp>
+```

package/demo/esbuild/designBook.tsx

@@ -2486,8 +2486,8 @@ const Cropping = () => {
       <Button
         onClick={ () => {
           Cropper.openDialogNEdit( {
-            // use: 'square',
-            use: '3:1',
+            use: '4:3',
+            // use: '3:1',
             develops: [
               { size: 'S' },
               { size: 'R' },

package/demo/next/next.config.ts

@@ -7,6 +7,9 @@ const nextConfig: NextConfig = {
   experimental: {
     webpackMemoryOptimizations: true,
   },
+  allowedDevOrigins: [
+    '192.168.10.71'
+  ]
 }
 
 export default nextConfig

package/dist/@utils/color.d.ts

@@ -1,6 +1,7 @@
 import { Themecolor } from '../@declares';
 export declare const ColorRecords: {
     key: Themecolor;
+    safeName?: string;
     isBrand?: true;
     hex: string;
 }[];

package/dist/fn/Cropper.d.ts

@@ -9,6 +9,16 @@ declare namespace Cropper {
         h: number;
         aspect: number;
     };
+    type Config = {
+        scale: {
+            _: number;
+            min: number;
+            max: number;
+        };
+        rotate: number;
+        grayScale: number;
+        tone: number;
+    };
     type Input = {
         use: Use;
         develops: Develop[];
@@ -27,7 +37,7 @@ declare namespace Cropper {
         }): void;
     };
     type CoreProps = {
-        val_file: Input.Filer.CustomFile;
+        file: Input.Filer.CustomFile;
         options: Input;
         finishedCallback(files: Input.Filer.CustomFile[]): void;
         abortCallback(): void;

package/dist/fn/Cropper.js

@@ -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,_=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};
+import{b as L,c as D,e as j}from"../chunk-C5N2D3ZX.js";import{Fragment as fe,jsx as o,jsxs as g}from"react/jsx-runtime";import C,{Filer as ne,UUID as se,useStore as q}from"jmini";import{$$fromRoot as ie}from"../@utils";import{useState as Y,useEffect as Q}from"react";import{Box as H,FAI as U,Column as G,FlexMargin as le}from"../atoms";import{Row as F,Literal as M}from"../mols";import{Button as X}from"./Button";import N from"./Sheet";import ee from"./Loader";import te from"./Input";import{faPalette as ce}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as he}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as pe}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as me}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as V}from"../@styles/componentClasses";import O from"./Tooltips";class ge{constructor(e){let{config:l}=e;this.setConfig=e.setConfig,this.val_file=e.val_file,this.develops=e.develops;{let[s,n]=C.isArray(e.use)&&e.use||e.use.split(":").map(p=>Number(p)),t=s/n;this.usage={w:s,h:n,aspect:t}}this.componentId=e.componentId;let a=e.canvas,r=e.image;this.Canvas={elm:a,ctx:a.getContext("2d")};let{width:i,height:c}=r,h=i/c;this.Picture={elm:r,originDataUrl:r.src,aspect:h,revisedAspect:1,rotate:l.rotate,grayScale:l.grayScale,tone:l.tone},this.scale={_:l.scale._,current:l.scale._,min:l.scale.min,max:l.scale.max},this.usage.aspect<this.Picture.aspect?this.scale.min=100/h*this.usage.aspect:this.scale.min=100*h/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:i/2,imageY:c/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,l=this.Picture.elm,a=0,r=0;{if(this.usage.aspect==1){let p=e.width*.6666666666666666,v=e.height*(2/3);r=a=Math.min(p,v)}else this.usage.aspect>1?(a=e.width*.9,r=a/this.usage.aspect):(r=e.height*.9,a=r*this.usage.aspect);let t=.85;r>e.height*t&&(r=e.height*t,a=r*this.usage.aspect),a>e.width*t&&(a=e.width*t,r=a/this.usage.aspect)}let{width:i,height:c}=l,h=(e.width-a)/2,s=(e.height-r)/2,n=a/r;this.pst={frame:{x:h,y:s,w:a,h:r,aspect:n},outImage:{x:0,y:0,w:0,h:0},imageX:i/2,imageY:c/2,centerX:e.width/2,centerY:e.height/2}}dragEffect(e){let{eventType:l,x:a,y:r}=e;if(l=="start"){let i=this.Canvas.elm.position();this.dragEffectInfo={origin:{x:a,y:r},frameExpandRate:{x:this.Canvas.elm.width/i.width,y:this.Canvas.elm.height/i.height}}}else{let{origin:i,frameExpandRate:c}=this.dragEffectInfo,h=i.x-a,s=i.y-r,n=this.scale.current*this.Picture.revisedAspect/100,t=h/n*c.x,p=s/n*c.y;l=="move"?this.drawImage(this.pst.imageX+t,this.pst.imageY+p):l=="end"&&this.drawImage(this.pst.imageX+=t,this.pst.imageY+=p)}}pinchEffect(e){let{eventType:l,event:a}=e,{x:r,y:i}=C.getCursor(a.touches[0]),{x:c,y:h}=C.getCursor(a.touches[1]),s=c-r,n=h-i;if(l=="start")this.pinchEffectInfo.origin={x:s,y:n,scale:this.scale.current};else if(l=="move"){let{origin:t}=this.pinchEffectInfo,p=Math.sqrt(Math.pow(t.x,2)+Math.pow(t.y,2)),w=Math.sqrt(Math.pow(s,2)+Math.pow(n,2))/p,f=Number(t.scale*w);f=Math.max(f,this.scale.min),f=Math.min(f,this.scale.max),this.setConfig(u=>D(L({},u),{scale:D(L({},u.scale),{_:f})}))}}updateScale(e){let l=e;l=Math.max(l,this.scale.min),l=Math.min(l,this.scale.max),this.scale.current=l,this.drawImage()}updateFilter(e){this.Picture.grayScale=e.grayScale,this.Picture.tone=e.tone,this.Picture.rotate=e.rotate,this.modifyImage()}modifyImage(){return j(this,null,function*(){let{grayScale:e,tone:l,rotate:a}=this.Picture;const r=document.createElement("canvas");let i=r.getContext("2d"),c=yield C.ImageLoader(this.Picture.originDataUrl),h=c.width,s=c.height;(a==90||a==270)&&(h=c.height,s=c.width),r.width=h,r.height=s,e&&(i.filter="grayscale("+e+"%)"),a&&(i.translate(h/2,s/2),i.rotate(a*Math.PI/180),C.isOneOf(a,90,270)?i.translate(-s/2,-h/2):i.translate(-h/2,-s/2)),i.drawImage(c,0,0,c.width,c.height);let n=i.getImageData(0,0,r.width,r.height),t=n.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]][l],u=f[0]/255,d=f[1]/255,B=f[2]/255;for(let b=0;b<s;b++)for(let S=0;S<h;S++){var p=(b*h+S)*4;if(e){let T=.3*t[p]+.59*t[p+1]+.11*t[p+2];for(var v=0;v<3;v++){let m=t[p+v];t[p+v]=m+(T-m)*e}}t[p]*=u,t[p+1]*=d,t[p+2]*=B}}i.putImageData(n,0,0);let w=r.toDataURL("image/jpeg");{let f=yield C.ImageLoader(w),{width:u,height:d}=f,B=u/d;this.Picture=D(L({},this.Picture),{elm:f,aspect:B,revisedAspect:this.pst.frame.aspect>B?this.pst.frame.w/u:this.pst.frame.h/d})}this.drawImage()})}drawImage(e,l){let{Canvas:{ctx:a,elm:r},pst:{frame:i}}=this;a.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height);let c=e||this.pst.imageX,h=l||this.pst.imageY;{let s=this.scale.current/100,n=this.Picture.revisedAspect*s,t=this.pst.centerX-c*n,p=this.pst.centerY-h*n,v=this.Picture.elm.width*n,w=this.Picture.elm.height*n,f=0,u=0;this.usage.aspect<this.Picture.aspect?(f=v,u=f/this.usage.aspect):(u=w,f=u*this.usage.aspect);{let d=this.pst.frame.x-(v-f)/2,B=this.pst.frame.x+this.pst.frame.w-(v+f)/2,b=this.pst.frame.y-(w-u)/2,S=this.pst.frame.y+this.pst.frame.h-(w+u)/2,T=0;t<B&&(T=t-B),t>d&&(T=t-d);let m=0;p<S&&(m=p-S),p>b&&(m=p-b),this.dragEffectInfo.origin.x+=T/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=m/2/this.dragEffectInfo.frameExpandRate.y,t=Math.min(Math.max(t,B),d),p=Math.min(Math.max(p,S),b)}this.pst.outImage={x:t,y:p,w:v,h:w};{let d=1;a.lineWidth=d,a.strokeStyle="#ffffff66",a.strokeRect(t+(v-f)/2-d,p+(w-u)/2-d,f+d*2,u+d*2)}a.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,t,p,v,w)}{if(this.usage.aspect==1){a.fillStyle="rgba( 20,24,20,.5 )",a.beginPath();let s=r.width/3*2,n=r.height/3*2,t=Math.min(s,n),p=Math.max(s,n);a.arc(r.width/2,r.height/2,p*1.41,0,Math.PI*2,!0),a.arc(r.width/2,r.height/2,t/2,0,Math.PI*2,!1),a.closePath(),a.fill()}else a.fillStyle="rgba( 20,24,20,.5 )";{let n=C(document.body).getStyleProperty("--color-theme-hsl"),t=2;a.lineWidth=t,a.strokeStyle=`hsla( ${n},1 )`,a.strokeRect(i.x-t,i.y-t,i.w+t*2,i.h+t*2)}}}export(){return j(this,null,function*(){let{Canvas:e,develops:l,Picture:a,pst:{outImage:r,frame:i}}=this,c=r.w/a.elm.width,h=r.h/a.elm.height,s=(i.x-r.x)/c,n=i.w/c,t=(i.y-r.y)/h,p=i.h/h,v=Array.from({length:l.length}),w="image/jpeg";for(let f=0;f<l.length;f++){let{size:u,maxSize:d}=l[f];d=d||{S:1024*20,R:1024*100,L:1024*350}[u];let B={S:140,R:600,L:1200}[u],b=document.createElement("canvas");b.width=n,b.height=p;let S=document.createElement("canvas");S.width=B,S.height=B/this.usage.aspect;let T=b.getContext("2d");if(!T)return;let m=S.getContext("2d");if(!m)return;T.clearRect(0,0,b.width,b.height),T.drawImage(this.Picture.elm,s,t,n,p,0,0,n,p),m.fillStyle="black",m.drawImage(b,0,0,b.width,b.height,0,0,S.width,S.height);let x=S.toDataURL(w),I=yield x.toBlob(w);if(!I)return;if(I.size>=d){let z=d/I.size;if(x=S.toDataURL(w,z*.92),I=yield x.toBlob(w),!I)return}let W=new File([I],this.val_file.name,{type:w});v[f]=W}return v})}}const re={Core:_=>{let{options:e,finishedCallback:l,abortCallback:a}=_,{use:r,develops:i=[]}=e,c=2048*2048,h=1024,s=4096,[n]=Y(se()),[t]=Y(()=>_.file),[p,v]=Y("init"),[w,f]=Y(""),[u,d]=Y({scale:{_:120,min:50,max:300},rotate:0,grayScale:0,tone:0}),[B,b]=Y(-1),[S,T]=Y(-1);return Q(()=>{let m="CropperResize";return C(window).onEvent("resize",()=>{C.interval.once(()=>{var Z;let x=ie("#Canvas-"+n)[0];if(!x)return;let I=(Z=q.get(n))==null?void 0:Z.Instance;if(!I)return;let W=x.position(),z=W.width/W.height,A=h,E=A/z;if(A*E>c){let $=A*E/c;A=Math.floor(A/Math.sqrt($)),E=Math.floor(E/Math.sqrt($))}x.width=h,x.height=E;let{width:k,height:K}=x;I.pst.centerX=k/2,I.pst.centerY=K/2,I.frameSizing(),I.modifyImage()},250,"CropperResize")},{eventID:m}),()=>{C(window).removeEvent(m)}},[]),Q(()=>{q.set({[n]:{}}),j(void 0,null,function*(){try{let m=ie("#Canvas-"+n)[0];if(!m)return;let x=m.position(),I=x.width/x.height,W=h,z=W/I;if(W*z>c){let y=W*z/c;W=Math.floor(W/Math.sqrt(y)),z=Math.floor(z/Math.sqrt(y))}m.width=W,m.height=z;let A=ne(t),E=yield C.ImageLoader(yield A.toObjectURL());if(E.width>s||E.height>s){const y=Math.min(s/E.width,s/E.height),R=document.createElement("canvas");R.width=Math.floor(E.width*y),R.height=Math.floor(E.height*y),R.getContext("2d").drawImage(E,0,0,R.width,R.height);const P=yield new Promise(J=>R.toBlob(oe=>J(URL.createObjectURL(oe))));E=yield C.ImageLoader(P)}b(E.width),T(E.height);let k=new ge({config:u,setConfig:d,val_file:t,develops:i,use:r,componentId:n,canvas:m,image:E});q.set({[n]:{Instance:k}});const K=function(y){if(y.preventDefault(),y.touches&&y.touches.length>1)k.pinchEffect({eventType:"start",event:y}),C(document).onEvent("touchmove",R=>{R.preventDefault(),k.pinchEffect({eventType:"move",event:R})},{eventID:"CropperEffectMove",passive:!1}).onEvent("touchend",$,{eventID:"CropperEffectEnd",passive:!1});else{k.dragEffect(L({eventType:"start"},C.getCursor(y)));let{type:R}=y;C(document).onEvent(R=="touchstart"?"touchmove":"mousemove",P=>{Z("move",P)},{eventID:"CropperEffectMove",passive:!1}).onEvent(R=="touchstart"?"touchend":"mouseup",P=>{Z("end",P),$(P)},{eventID:"CropperEffectEnd",passive:!1})}},Z=function(y,R){R.preventDefault(),k.dragEffect(L({eventType:y},C.getCursor(R)))},$=function(y){y.preventDefault(),C(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};C(m).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).onEvent("wheel",y=>{y.preventDefault();let R=Number(y.wheelDelta*.04),P=k.scale.current+R;P=Math.max(P,k.scale.min),P=Math.min(P,k.scale.max),d(J=>D(L({},J),{scale:D(L({},J.scale),{_:P})}))},{eventID:"CropperMouseWheel",passive:!1}).onEvent("touchstart",K,{eventID:"CropperTouchStart",passive:!1}).onEvent("mousedown",K,{eventID:"CropperMouseDown",passive:!1}),yield C.pending(1e3),v("ok")}catch(m){v("error"),f((m==null?void 0:m.message)||C.Stringify(m)),console.error(m)}})},[t.id]),Q(()=>{var x;let m=(x=q.get(n))==null?void 0:x.Instance;m&&m.updateScale(u.scale._)},[u.scale._]),Q(()=>{var x;let m=(x=q.get(n))==null?void 0:x.Instance;m&&m.updateFilter(u)},[u.grayScale,u.tone,u.rotate]),o(N.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:g(G,{className:[V("Wrap"),V("Use_"+r)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[g(H,{position:"absolute",ssZIndex:2,top:"50%",left:"50%",flexCenter:!0,xcss:{transform:"translate( -50%,-50% )",pointerEvents:"none"},children:[p=="init"&&o(ee.Theme.XL,{showInitial:!0}),p=="error"&&g(M.Mini,{fontColor:"nega",children:["\u753B\u50CF\u306E\u8AAD\u307F\u8FBC\u307F\u306B\u5931\u6557\u3057\u307E\u3057\u305F",o(M.Description,{children:w})]})]}),g(H,{flexSizing:0,overflow:"hidden",ssZIndex:1,flexCenter:!0,paddingBottom:6,xcss:{backgroundColor:"#000f0f"},children:[o("canvas",{style:{width:"100%",height:"100%"},width:h,height:h,className:V("Canvas"),id:"Canvas-"+n}),o(M.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:g(G,{gap:"1/2",children:[g(F.Left,{gap:"1/2",flexWrap:!0,fontColor:"white",fontSize:"0.xs",fontHeight:1.2,children:[g(M,{children:["[",t.type,"]"]}),o(M,{children:t.name}),g(M,{children:[B,"px x ",S,"px"]}),g(M,{children:["[",t.size.rank(),"B]"]})]}),g(F.Left,{gap:"1/2",verticalAlign:"unset",flexWrap:!0,children:[o(re.SettingRegion,{config:u,setConfig:d}),o(le,{}),o(X.Border.S,{onClick:()=>{a()},children:"\u9589\u3058\u308B"}),o(X.Prime.S,{boxShadow:"3.remark",onClick:()=>j(void 0,null,function*(){var I;let m=(I=q.get(n))==null?void 0:I.Instance;if(!m)return;ee.fn.mini.active("CropperExportation");let x=yield m.export();setTimeout(()=>{ee.fn.mini.stop("CropperExportation"),l(x)},1e3)}),children:g(F.Center,{gap:"1/2",children:[o(ee.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})})]})]})})},SettingRegion:_=>{let{config:e,setConfig:l}=_,a=["","\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"],r=i=>a[i]||"\u306A\u3057";return g(fe,{children:[g(F.Center,{gap:"1/6",children:[g(X.Border.S,{flexCenter:!0,gap:"1/4",border:"unset",borderTopRightRadius:0,borderBottomRightRadius:0,onClick:()=>{let i=e.rotate-90;i<0&&(i+=360),l(c=>D(L({},c),{rotate:i}))},children:[o(M,{children:"90\xB0"}),o(U,{icon:pe,fontColor:"4.thin"})]}),g(X.Border.S,{flexCenter:!0,gap:"1/4",border:"unset",borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{let i=(e.rotate+90)%360;l(c=>D(L({},c),{rotate:i}))},children:[o(U,{icon:me,fontColor:"4.thin"}),o(M,{children:"90\xB0"})]})]}),g(X.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:i=>{let c="CropperZoomEdit";O.open({tipsID:c,gravityPoint:3,event:i,closeAtParentBlur:!1,xcss:{minWidth:12*26},content:o(N.Body,{children:g(G,{padding:1.5,children:[g(F.Separate,{children:[o(M.Paragraph,{children:g(F.Center,{gap:"1/2",children:[o(U.Search,{fontColor:"5.translucent"}),"Zoom"]})}),o(X.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{O.close(c)},children:o(U.X,{})})]}),o(H,{borderBottom:!0,opacity:"low"}),o(te.Slider,{override:"force",value:e.scale._-e.scale.min,min:e.scale.min-100,max:e.scale.max-100,step:25,onUpdateValidValue:(h,s)=>{C.interval.once(()=>{let n=h+100;l(t=>D(L({},t),{scale:D(L({},t.scale),{_:n})}))},250,"Cropper.UpdateScale")},onLegendRender:h=>"x"+Math.round(100+h)/100})]})})})},children:[o(M.Micro,{fontColor:"4.thin",children:"Zoom"}),g(M,{unitWidth:4,children:[e.scale._.toRatio(1,0),"%"]})]}),g(X.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:i=>{let c="CropperGrayScaleEdit";O.open({tipsID:c,gravityPoint:3,event:i,closeAtParentBlur:!1,xcss:{minWidth:12*26},content:o(N.Body,{children:g(G,{padding:1.5,children:[g(F.Separate,{children:[o(M.Paragraph,{children:g(F.Center,{gap:"1/2",children:[o(U,{icon:ce,fontColor:"5.translucent"}),"Gray Scale"]})}),o(X.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{O.close(c)},children:o(U.X,{})})]}),o(H,{borderBottom:!0,opacity:"low"}),o(te.Slider,{value:e.grayScale,min:0,max:100,step:10,onUpdateValidValue:h=>{C.interval.once(()=>{l(s=>D(L({},s),{grayScale:h}))},250,"Cropper.GrayScale")},onLegendRender:h=>h+"%"})]})})})},children:[o(M.Micro,{fontColor:"4.thin",children:"GrayScale"}),g(M,{children:[e.grayScale.toRatio(1,0),"%"]})]}),g(X.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:i=>{let c="CropperToneEdit";O.open({tipsID:c,gravityPoint:3,event:i,closeAtParentBlur:!1,xcss:{minWidth:12*26,maxWidth:12*24},content:()=>{let h=[];for(let s=1;s<=10;s++)h.push({value:s,label:g(F.Left,{gap:"1/3",children:[o(H,{ssSphere:1,className:[V("ToneBall"),V("ToneBall_"+s)].join(" ")}),o(H,{textAlign:"left",flexSizing:0,children:r(s)})]})});return o(N.Body,{children:g(G,{padding:1.5,children:[g(F.Separate,{children:[o(M.Paragraph,{children:g(F.Center,{gap:"1/2",children:[o(U,{icon:he,fontColor:"5.translucent"}),"Tone"]})}),o(X.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{O.close(c)},children:o(U.X,{})})]}),o(H,{borderBottom:!0,opacity:"low"}),o(te.Radio.Normal,{value:e.tone,gap:"1/2",cellStyles:{fontColor:"3.blur"},options:[{value:0,label:o(H,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...h],onUpdateValidValue:s=>{l(n=>D(L({},n),{tone:s}))}})]})})}})},children:[o(M.Micro,{fontColor:"4.thin",children:"Tone"}),o(H,{boxShadow:"2.remark",ssSphere:1,className:[V("ToneBall"),V("ToneBall_"+e.tone)].join(" ")}),r(e.tone)]})]})}},ae={openDialogNEdit:_=>{te.Filer.fn.openDialog({accept:"image",multiple:!1,onChange:e=>{ae.openEditor(L({imageFile:e[0]},_))}})},openEditor:_=>j(void 0,null,function*(){let e="CropperImage";N.open("middleCenter",{sheetID:e,size:"MAX",padding:0,margin:0,xcss:{maxWidth:"100%"},content:o(re.Core,{file:_.imageFile,options:_,finishedCallback:l=>{N.close(e),_.onProcessFinished(l)},abortCallback:()=>{N.close(e)}}),closeAtEscapeKeyDown:!1})})};export{ae as Cropper,ae as default};

package/dist/fn/DataGrid/index.js

@@ -1 +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};
+import{b as n,c as p,d as G,e as be}from"../../chunk-C5N2D3ZX.js";import{Fragment as Be,jsx as o,jsxs as $}from"react/jsx-runtime";import u,{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 b={reservedKeys:["row_id","onCheckerDisabled","onDraggerDisabled","columnIdx","isSelected","isFilterMatched","isVisible","draggerIndex","onRowClick"],toSafetyHeader:t=>{let e=!!t.some(l=>l.draggable);return(t==null?void 0:t.map((l,a)=>{var d;return u.isRecord(l)||(l={key:l}),u.isString(l.key)&&(l.key=l.key.replace(/[.\s]/g,"_")),e&&(l.sortable=0,l.filterable=!1),l.columnIdx=(d=l.columnIdx)!=null?d:a,l}).toASC("columnIdx"))||[]},toSafetyBody:t=>t==null?void 0:t.map((e,r)=>{var a;let l={};return Object.entries(e).forEach(([d,c])=>{var i,s;if(u.isOneOf(d,...b.reservedKeys))return;let g=c;u.isNullish(g)||(u.isRecord(g)||(g={data:g}),u.isString(d)&&(d=d.replace(/[.\s]/g,"_")),g.sortKey=(s=(i=g.sortKey)!=null?i:String(g.data))!=null?s:"",l[d]=g)}),l=p(n({},l),{row_id:(a=e.row_id)!=null?a:r,onRowClick:e.onRowClick,isSelected:!!e.isSelected,isFilterMatched:!0,isVisible:!0,onCheckerDisabled:e.onCheckerDisabled,onDraggerDisabled:e.onDraggerDisabled,draggerIndex:r}),l}),toSafetyData:t=>{var l,a;let{header:e=[]}=t,r={datagridID:t.datagridID||ge(),sessionID:ge(),body:b.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=(a=(l=e[d])==null?void 0:l.sortable)!=null?a:1)}return r.draggable&&(r.sort.col=-1,r.sort.dir=0),b.updateRowMeta(r,t)},updateRowMeta:(t,e)=>{var l;let r=n({},t);if(r.sort.col>=0&&r.sort.dir){let a=((l=e.header[r.sort.col])==null?void 0:l.key)||"";r.sort.dir==1?r.body.toASC(a+".sortKey"):r.body.toDESC(a+".sortKey")}{let a=String(r.filter.keyword)||"";r.body.forEach(d=>{if(d.isFilterMatched=!0,!a)return;let c=e.header.some(g=>{var f;let i=d[g.key];return!i||!i.sortKey?!1:!!((f=String(i.sortKey||i.data))!=null&&f.match(new RegExp(a.escapeRegExChar(),"i")))});d.isFilterMatched=c})}{let a=r.paging.rows;r.paging.total=Math.ceil(r.body.filter(i=>i.isFilterMatched).length/a);let d=a*(r.paging.current-1),c=d+a,g=0;r.body.forEach(i=>{i.isVisible=!1,i.isFilterMatched&&(i.isVisible=g>=d&&g<c,g++)})}return r.draggable&&r.body.toASC("draggerIndex"),r},index:t=>{var s,f,H,x;let[e,r]=Re(()=>b.toSafetyData(t));se(()=>{ne.set({["reset-"+e.datagridID]:()=>{r(b.toSafetyData(t))},["refresh-"+e.datagridID]:()=>{r(y=>b.updateRowMeta(p(n({},y),{body:b.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=>b.updateRowMeta(p(n({},m),{paging:p(n({},m.paging),{current:Math.max(1,Math.min(m.paging.total,y))})}),t))},maxRow:y=>{r(m=>b.updateRowMeta(p(n({},m),{paging:p(n({},m.paging),{rows:y,current:1})}),t))},searchKey:y=>{u.interval.once(()=>{r(m=>{let w=p(n({},m),{paging:p(n({},m.paging),{current:1}),filter:p(n({},m.filter),{keyword:String(y||"").trim()})});return b.updateRowMeta(w,t)})},300,"InputSearchTime")}}})},[e]);const l=me.useRef(!1);se(()=>{if(t.onSelected){if(!l.current){l.current=!0;return}t.onSelected(e.body.filter(y=>y.isSelected))}},[(s=e==null?void 0:e.body)==null?void 0:s.filter(y=>y.isSelected).length]);const a=me.useRef(!1);se(()=>{if(t.onSorted){if(!a.current){a.current=!0;return}t.onSorted(e.sort.col,e.sort.dir)}},[(f=e==null?void 0:e.sort)==null?void 0:f.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:g}=xe(t),i=(x=t.colLength)!=null?x:t.header.length;return o(K,{className:c,style:g,children:o(D.Table,{className:Ke("DataGrid"),borderRadius:"inherit",children:$(D.Body,{children:[o(b.Header,n({},d)),o(b.Body,n({},d)),o(b.Footer,n({},d))]})},[i,...t.header.map(y=>y.key),e.sessionID].join("."))})},Checker:t=>o(K,{flexCenter:!0,onClick:e=>{e.stopPropagation()},children:o(E.Checker,p(n({wrapStyles:{display:"inlineBlock"},cellStyles:{gap:0}},t),{label:!1}))}),Header:t=>{var i,s,f,H;let{input:e,val_config:r,set_config:l}=t;if(e.headerless)return null;let a="datagrid-dragger-"+r.datagridID,d=["datagrid",r.datagridID,""].join("-"),c=1+r.body.filter(x=>x.isVisible).length+ +!!e.footer,g=(i=e.colLength)!=null?i:e.header.length;return o(ye.DropArea,p(n({jsxElement:D.Row,id:d},e.rowStyles),{dragInfo:{type:a,id:String(((H=(f=(s=r.body)==null?void 0:s.filter(x=>x.isFilterMatched))==null?void 0:f[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:g-y-1,bottomIdx:c-1,isHeader:!0,isBody:!1,isFooter:!1},Z=J,V=P!=0,O=y==r.sort.col,Q=u.deepMerge(u.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(o(ce.Clear.S,{ssSphere:2.5,fontColor:"theme",onMouseOver:h=>{Ce.open(h.currentTarget,$(pe.Mini,{children:[o(_,{icon:Se}),"\u30C9\u30E9\u30C3\u30B0\u3067\u5217\u306E\u9806\u756A\u3092\u5909\u66F4"]}),22)},onMouseLeave:h=>Ce.abort(),onClick:h=>{h.stopPropagation()},children:o(_.QuestionCircle,{})},"drag")),N){let h=o(b.Checker,{value:r.body.every(R=>R.isSelected),onUpdateValue:R=>{l(L=>{let z=n({},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(o(_,{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")),o(D.Cell,p(n(n({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&&l(R=>{let L=n({},R);return L.sort={col:y,dir:O?R.sort.dir*-1:P},b.updateRowMeta(L,e)})},children:$(q.Left,{gap:"1/3",height:1,children:[U,(F=B==null?void 0:B(C))!=null?F:o(K,{flexSizing:0,children:M!=null?M:C}),ee]})}),[y,x.key].join("/"))})}))},Body:t=>{var g,i;let{input:e,val_config:r,set_config:l}=t,a=r.body.filter(s=>s.isVisible),d=+!e.headerless+a.length+ +!!e.footer,c=(g=e.colLength)!=null?g:e.header.length;return a.length?o(Be,{children:a.map((s,f)=>{let{onCheckerDisabled:H,onDraggerDisabled:x}=s,y=f;e.headerless||(y+=1);let m="datagrid-dragger-"+r.datagridID,w=["datagrid",r.datagridID,s.row_id].join("-");return o(ye.DropArea,p(n({jsxElement:D.Row,id:w,ssPushable:!!e.onRowClick||!!s.onRowClick},e.rowStyles),{onClick:S=>{s.onRowClick&&s.onRowClick(S),e.onRowClick&&e.onRowClick(s,S)},dragInfo:{type:m,id:String(s.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=s[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=u.deepMerge(u.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 u.scope(()=>{if(M){if(s.onDraggerDisabled){V.push(s.onDraggerDisabled());return}V.push(o(ce.Clear.S,{tabIndex:-1,isRounded:!0,ssSphere:2.5,fontColor:"6.clear",onPointerDown:k=>{let j=u("#"+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==s.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),l(W=>p(n({},W),{body:R}))}))},children:o(q.Center,{gap:"1/4",children:o(_,{icon:Se})})},"drag"))}}),u.scope(()=>{if(!S.checkable)return;let k=o(b.Checker,{override:"force",value:!!s.isSelected,onUpdateValue:j=>{l(F=>p(n({},F),{body:F.body.map(h=>(h.row_id==s.row_id&&(h.isSelected=!!j),h))}))}},"check");s.onCheckerDisabled&&(k=s.onCheckerDisabled()),S.checkable=="left"?V.push(k):O.push(k)}),o(D.Cell,p(n(n({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:o(K,{flexSizing:0,children:he(A!=null?A:String(P),r.filter.keyword)}),O]})}),[C,S.key].join("/"))})}),[s.row_id,y].join("."))})}):o(D.Row,p(n({},e.rowStyles),{children:o(D.Cell,{colSpan:c,padding:1,children:(i=e.onNoRecordsRender)==null?void 0:i.call(e)})}))},Footer:t=>{var c;let{input:e,val_config:r,set_config:l}=t;if(!e.footer)return null;let a=+!e.headerless+r.body.filter(g=>g.isVisible).length+1,d=(c=e.colLength)!=null?c:e.header.length;return o(D.Row,p(n({},e.rowStyles),{children:e.header.toASC("columnIdx").map((g,i)=>{var Y,N,J,de,P,A,v;let s=e.footer[g.key];if(!s)return null;u.isRecord(s)||(s={data:s});let[f,H]=X(s),B=H,{isTH:x,data:y,label:m,onLabelRender:w}=B,S=G(B,["isTH","data","label","onLabelRender"]),C={rowIdx:a-1,colIdx:i,topIdx:a-1,leftIdx:i,rightIdx:d-i-1,bottomIdx:0,isHeader:!1,isBody:!1,isFooter:!0},M=u.deepMerge(u.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),f);return e.onCellStyles&&(M=e.onCellStyles(C,M||{})),o(D.Cell,p(n(n({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:o(K,{flexSizing:0,children:(v=w==null?void 0:w(y))!=null?v:he(m!=null?m:String(y),r.filter.keyword)})}),[i,g.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:()=>o(q.Center,{children:o(pe.Mini,{fontColor:"4.thin",children:"(\u30C7\u30FC\u30BF\u306A\u3057)"})})},t),t.rowStyles=n({backgroundColor:"layer.0"},t.rowStyles),t.cellStyles=n(p(n({},u.scope(()=>{if(!t.tone)return{};let e={};return u.isOneOf(t.tone,"border","border.horizontal")&&(e.borderBottom="2.normal"),u.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=b.toSafetyHeader(t.header||[]),t.header.forEach((e,r)=>{var l;e.sortable=(l=e.sortable)!=null?l:1,e.checkable===!0&&(e.checkable="left")}),o(b.index,n({},t))),ue={getBodyRows:t=>ne.get("rows-"+t)||[],toSafetyBody:b.toSafetyBody,reset:t=>{var e;(e=ne.get("reset-"+t))==null||e()},refreshBody:t=>{var e;(e=ne.get("refresh-"+t))==null||e()},reservedKeys:b.reservedKeys,Table:t=>o(K,p(n({htmlTag:"table",borderRadius:"inherit"},t),{border:t.border})),Head:t=>o(K,n({htmlTag:"thead",borderRadius:"inherit"},t)),Body:t=>o(K,n({htmlTag:"tbody",borderRadius:"inherit"},t)),Row:t=>o(K,n({htmlTag:"tr",borderRadius:"inherit"},t)),TH:t=>o(K,n({htmlTag:"th"},t)),TD:t=>o(K,n({htmlTag:"td"},t)),Cell:t=>{let l=t,{isTH:e}=l,r=G(l,["isTH"]);return e?o(ue.TH,n({},r)):o(ue.TD,n({},r))},RightIndicator:{data:"",label:o(q.Right,{children:o(_.AngleRight,{fontColor:"theme",fontSize:"3.paragraph"})})},SearchInput:t=>{let d=t,{datagridID:e}=d,r=G(d,["datagridID"]),l=ie.catch(t.datagridID);if(!l)return console.warn("[DataGrid] SearchInput must be used inside DataGrid."),null;let{val_config:a}=l;return o(E.TextField,p(n({label:"\u691C\u7D22...",clearButton:!0,padding:["1/2","2/3"],rightIcon:o(E.RightIcon,{ssSphere:2,fontColor:"5.translucent",right:"2/3",children:o(_.Search,{})}),value:a.filter.keyword},r),{onUpdateValidValue:(...c)=>{r.onUpdateValidValue&&r.onUpdateValidValue(...c),l.remoteUpdate.searchKey(c[0])}}))},Info:t=>{let e=ie.catch(t.datagridID);if(!e)return null;let{val_config:r}=e,l=t.totalCount||r.body.length,a=r.body.filter(c=>c.isFilterMatched).length,d=a.toRate(l,1)||0;return $(we,{verticalAlign:"baseline",gap:"1/2",fontSize:"1.mini",fontColor:"3.blur",children:[o(ke,{fontSize:"4.thirdTitle",fontColor:"theme",children:a.toLocaleString()}),"/ ",l.toLocaleString(),"\u4EF6 (",d,"%)"]})},Paging:t=>{let g=t,{datagridID:e}=g,r=G(g,["datagridID"]),l=ie.catch(e);if(!l)return null;let{val_config:a}=l,d=[];for(let i=0;i<a.paging.total;i++)d.push({value:i+1,label:(i+1).toString()});const c=i=>{let s=Math.min(Math.max(1,i),a.paging.total),f=n({},a);f.paging.current=s,l.remoteUpdate.paging(s)};return o(E.Select,p(n({emptySelect:!1,padding:["1/3","2/3"],override:"force",gap:0},r),{leftIcon:o(E.LeftIcon,{xcss:{left:2,pointerEvents:"all"},children:o(ce.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(a.paging.current==1){c(a.paging.total);return}c(a.paging.current-1)},children:o(_.ChevronLeft,{})})}),rightIcon:o(E.RightIcon,{xcss:{right:2,pointerEvents:"all"},children:o(ce.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(a.paging.current==a.paging.total){c(1);return}c(a.paging.current+1)},children:o(_.ChevronRight,{})})}),options:d.map(i=>({value:i.value||0,label:$(q.Left,{gap:"1/3",verticalAlign:"baseline",children:[i.label,$(pe.Micro,{fontColor:"4.thin",children:["/ ",a.paging.total]})]})})),value:a.paging.current,onUpdateValidValue:i=>{c(i)}}))},RowCount:t=>{let s=t,{datagridID:e}=s,r=G(s,["datagridID"]),l=ie.catch(e);if(!l)return null;let{val_config:a}=l,d=a.body.filter(f=>f.isFilterMatched).length,c=a.paging.rows,g=0,i=t.options.map(f=>(g|=+(f==c),{value:f,label:f.toString()}));return g||i.push({value:c,label:c.toString()}),o(q.Center,{gap:"1/2",children:o(E.Select,p(n({emptySelect:!1,override:"force",padding:"1/3",paddingLeft:3,paddingRight:2,pickerStyles:{xcss:{minWidth:12*9}},pickerPosition:4,leftIcon:o(E.LeftIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{left:6},children:"\u8868\u793A"}),rightIcon:o(E.RightIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{right:6},children:"\u4EF6"})},r),{value:a.paging.rows,options:i.toASC("value"),onUpdateValidValue:f=>{l.remoteUpdate.maxRow(Number(f))}}))})}},D=Object.assign(Me,ue);export{D as DataGrid,D as default,fe as onDefaultCellStyles};

package/dist/fn/Input/Filer.js

@@ -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 m}from"react/jsx-runtime";import{useState as Q,useEffect as Y}from"react";import z,{UUID as b,useStore as ee}from"jmini";import{$$fromRoot as _,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:t,states:o}=e,{required:c}=o,l=[];return c&&!t.length&&l.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!l.filter(({type:u})=>u=="invalid").length,notice:l}}const ae={List:e=>{let{rootStates:t,val_status:o,set_status:c}=e;if(t.useSystemOnly)return null;let l=t.limit-(o.rawValue||[]).length,u=(o.rawValue||[]).map((p,a)=>n(ae.ListCell,f(r({},e),{index:a,val_file:p}),p.name));l>0&&u.push(n(h,f(r({htmlTag:"label"},t.cellStyles),{className:[t.cellClassName,y("AddButton")].join(" "),"data-component-id":o.componentId,htmlFor:t.id,tabIndex:t.tabIndex,onKeyDown:p=>{let{key:a}=p;t.tabIndex!=-1&&z.isOneOf(a," ","Enter")&&_("#"+t.id).click()},children:m(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"})}),m(h,{children:[m(h,{fontColor:"theme",fontSize:"2.normal",isSemiBoldFont:!0,children:["\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E(",l,")"]}),n(re.Micro,{fontColor:"4.thin",isSemiBoldFont:!0,children:"\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7"})]})]})}),"AddButton"));let[i]=se(t);return n(te,f(r({flexSizing:"auto"},i),{className:t.className,children:u}))},ListCell:e=>{let{index:t,rootStates:o,val_file:c,val_status:l,set_status:u}=e,{name:i,size:p,type:a}=c,[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(()=>{_("#"+I).focus()},100)},[d]),m(R,f(r({verticalAlign:"center",flexWrap:!1,gap:1,className:o.cellClassName},o.cellStyles),{children:[n(L.File,{fontSize:"4.thirdTitle",fontColor:"4.thin"}),m(h,{flexSizing:0,children:[n(h,{children:n(R,{verticalAlign:"center",gap:"2/3",flexWrap:!1,className:y("FileName"),children:d?n(ne,{children:m(te,{flexSizing:0,gap:"1/2",children:[m(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)}}),m(h,{children:[". ",W]})]}),m(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=[...l.rawValue],N=w[t],X=N.id;if(!N)return;let P=yield String(yield N.convert("dataURL")).toBlob(c.type);if(!P)return;let $=new File([P],B+"."+W,{type:N.type});$.id=X,w[t]=$,u(O=>f(r({},O),{rawValue:w,eventType:"update",eventID:b(12),isInspected:!1})),v(!1)})],children:"\u6C7A\u5B9A"})]})]})}):m(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&&m(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=[...l.rawValue];F[t]&&(F.splice(t,1),u(w=>f(r({},w),{rawValue:F,eventType:"update",eventID:b(12),isInspected:!1})))},children:n(L.X,{})})]}))}},ye=e=>{let Z=e,{tone:t,required:o,form:c,isNameEditable:l,useSystemOnly:u,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:k,name:E}=S;if(g+1+C.length>p){j.add({componentId:E,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u9078\u629E\u4E0A\u9650\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${E}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}if(i&&i=="image"&&!k.match(/image/)){j.add({componentId:E,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u304C\u7570\u306A\u308B\u305F\u3081\u3001${E} \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),m(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(),k=S.name;if(S.id=b(),g+1+T.rawValue.length>p){j.add({componentId:k,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u767B\u9332\u6570\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${k}}\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:t,accept:o}=e,c=b();const l=document.createElement("input");l.type="file",l.multiple=!!t,l.value="",l.id=c,o&&(o=="image"?l.accept="image/png,image/jpeg,image/jpg,image/webp":l.accept=o),z("body").append(l),l.onchange=u=>{var a;let i=((a=u==null?void 0:u.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),z("#"+c).remove()},l.click()}},typeof window!="undefined"&&window.document&&z(document).onEvent("dragover",e=>{e.preventDefault(),_("."+y("AddButton")).addClass(y("Draggable"))},{passive:!1}).onEvent("drop",e=>{e.preventDefault(),_("."+y("AddButton")).removeClass(y("Draggable"));let t=e.dataTransfer.files;if(t.length){let o=e.target;if(_(o).hasClass(y("AddButton"))){let{componentId:c}=o.dataset,l=ee.get("AddFiles-"+c);l&&l(t)}}},{passive:!1});export{q as Filer,q as default};
+import{b as r,c as f,d as G,e as H}from"../../chunk-C5N2D3ZX.js";import{Fragment as ne,jsx as n,jsxs as c}from"react/jsx-runtime";import{useState as Q,useEffect as Y}from"react";import _,{UUID as b,useStore as ee}from"jmini";import{$$fromRoot as k,ExtractStyles as se}from"../../@utils";import{Box as h,FAI as L,Flex as R,Column as te}from"../../atoms";import{Literal as re,Row as pe}from"../../mols";import{Button as M}from"../Button";import j from"../Snackbar";import{OptionalInputWrapper as ue,BoxWrapper as me,CoreEffects as le,DefaultBoxishStyles as ce}from"./core";import de from"./TextField";import{InputFilerClasses as y}from"../../@styles/componentClasses";import{faCloudArrowUp as fe}from"@fortawesome/free-solid-svg-icons/faCloudArrowUp";function ge(e){let{value:l,states:o}=e,{required:u}=o,t=[];return u&&!l.length&&t.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!t.filter(({type:m})=>m=="invalid").length,notice:t}}const ae={List:e=>{let{rootStates:l,val_status:o,set_status:u}=e;if(l.useSystemOnly)return null;let t=l.limit-(o.rawValue||[]).length,m=(o.rawValue||[]).map((p,a)=>n(ae.ListCell,f(r({},e),{index:a,val_file:p}),p.name));t>0&&m.push(n(h,f(r({htmlTag:"label"},l.cellStyles),{className:[l.cellClassName,y("AddButton")].join(" "),"data-component-id":o.componentId,htmlFor:l.id,tabIndex:l.tabIndex,onKeyDown:p=>{let{key:a}=p;l.tabIndex!=-1&&_.isOneOf(a," ","Enter")&&k("#"+l.id).click()},children:c(pe.Center,{padding:["1/3",0],children:[n(h,{isRounded:!0,className:y("AddIcon"),children:n(L,{icon:fe,className:y("Icon"),fontColor:"theme",fontSize:"4.thirdTitle",backgroundColor:"theme.opa.low",ssSphere:3,padding:"1/2"})}),c(h,{children:[c(h,{fontColor:"theme",fontSize:"2.normal",isSemiBoldFont:!0,children:["\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E(",t,")"]}),n(re.Micro,{fontColor:"4.thin",isSemiBoldFont:!0,children:"\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7"})]})]})}),"AddButton"));let[i]=se(l);return n(te,f(r({flexSizing:"auto"},i),{className:l.className,children:m}))},ListCell:e=>{let{index:l,rootStates:o,val_file:u,val_status:t,set_status:m}=e,{name:i,size:p,type:a}=u,[d,v]=Q(!1),I=b(),J=p.rank(),[K,W]=i.replace(/\s/g,"_").replace(/(.*)\.(.*)$/,"$1 $2").split(" "),s="\u30D5\u30A1\u30A4\u30EB";return a.match(/image/)?s=a.replace(/image\//,""):a.match(/pdf/)?s="PDF":a.match(/csv/)?s="CSV":a.match(/spreadsheet/)?s="SpreadSheet":a.match(/presentation/)?s="PowerPoint":a.match(/word/)?s="Word":a.match(/zip/)?s="Zip":a.match(/powerpoint/)?s="PowerPoint":a.match(/html/)?s="HTML":a.match(/js/)?s="JavaScript":a.match(/css/)?s="CSS":a.match(/text\/plain/)&&(s="\u30C6\u30AD\u30B9\u30C8"),Y(()=>{d&&setTimeout(()=>{k("#"+I).focus()},100)},[d]),c(R,f(r({verticalAlign:"center",flexWrap:!1,gap:1,className:o.cellClassName},o.cellStyles),{children:[n(L.File,{fontSize:"4.thirdTitle",fontColor:"4.thin"}),c(h,{flexSizing:0,children:[n(h,{children:n(R,{verticalAlign:"center",gap:"2/3",flexWrap:!1,className:y("FileName"),children:d?n(ne,{children:c(te,{flexSizing:0,gap:"1/2",children:[c(R,{gap:"2/3",verticalAlign:"center",children:[n(de,{tone:"border",wrapStyles:{flexSizing:"auto"},restrict:"fileName",name:"name",required:!0,id:I,form:"form-"+I,enableFormSubmit:!0,value:K,onKeyDown:F=>{let{key:B}=F;B=="Escape"&&v(!1)}}),c(h,{children:[". ",W]})]}),c(R,{gap:"2/3",horizontalAlign:"right",flexWrap:!1,children:[n(M.Sub.S,{padding:["2/3",1],onClick:()=>{v(!1)},children:"\u9589\u3058\u308B"}),n(M.Prime.S,{padding:["2/3",1],onFormSubmit:["form-"+I,F=>H(void 0,null,function*(){let{name:B}=F.body,w=[...t.rawValue],N=w[l],X=N.id;if(!N)return;let P=yield String(yield N.convert("dataURL")).toBlob(u.type);if(!P)return;let $=new File([P],B+"."+W,{type:N.type});$.id=X,w[l]=$,m(O=>f(r({},O),{rawValue:w,eventType:"update",eventID:b(12),isInspected:!1})),v(!1)})],children:"\u6C7A\u5B9A"})]})]})}):c(ne,{children:[i,!!o.isNameEditable&&n(M.Clear,{ssSphere:2.5,flexSizing:"none",fontColor:"4.thin",padding:"1/3",ssEffectsOnActive:"expand",color:"cloud",onClick:()=>{v(!0)},children:n(L.Pen,{})})]})})}),!d&&c(h,{fontSize:"1.mini",fontColor:"4.thin",flexSizing:0,children:[s,"\u30D5\u30A1\u30A4\u30EB / ",J,"B"]})]}),n(M.Sub,{color:"cloud",fontColor:"4.thin",ssSphere:3,onClick:()=>{let F=[...t.rawValue];F[l]&&(F.splice(l,1),m(w=>f(r({},w),{rawValue:F,eventType:"update",eventID:b(12),isInspected:!1})))},children:n(L.X,{})})]}))}},ye=e=>{let Z=e,{tone:l,required:o,form:u,isNameEditable:t,useSystemOnly:m,accept:i="*",limit:p=1,showInitValidation:a,onChange:d,onValidate:v,onValidateDelay:I,onUpdateValue:J,onUpdateValidValue:K,onUserAction:W,value:s=[],className:F,cellStyles:B,cellClassName:w,componentId:N,status_id:X,enableFormSubmit:oe,xcss:P,wrapStyles:$}=Z,O=G(Z,["tone","required","form","isNameEditable","useSystemOnly","accept","limit","showInitValidation","onChange","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","className","cellStyles","cellClassName","componentId","status_id","enableFormSubmit","xcss","wrapStyles"]),[T,A]=Q(le.DefaultStatus(e.componentId||"",s)),ie={rootStates:e,val_status:T,set_status:A};Y(()=>{ee.set({["AddFiles-"+T.componentId]:x=>{A(D=>{let C=D.rawValue,V=[];for(var g=0;g<(x==null?void 0:x.length);g++){let S=x[g],{type:E,name:z}=S;if(g+1+C.length>p){j.add({componentId:z,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u9078\u629E\u4E0A\u9650\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${z}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}if(i&&i=="image"&&!E.match(/image/)){j.add({componentId:z,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u304C\u7570\u306A\u308B\u305F\u3081\u3001${z} \u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}V.push(S)}return f(r({},D),{rawValue:[...C,...V],eventType:"update",eventID:b(12),isInspected:!1})})}})},[]),le.CommonEffects({type:"file",states:e,val_status:T,set_status:A,SystemValidation:ge});let U="";return i&&(i=="image"?U="image/png,image/jpeg":U=i),c(me,{val_status:T,set_status:A,states:e,children:[n(h,f(r({htmlTag:"input",type:"file",className:y("Input"),"data-component-id":T.componentId,accept:U,multiple:p!=1,onChange:x=>H(void 0,null,function*(){d&&d(x);let D=x.target,C=D.files,V=[];for(var g=0;g<(C==null?void 0:C.length);g++){if(!C[g])continue;let S=C[g].clone(),E=S.name;if(S.id=b(),g+1+T.rawValue.length>p){j.add({componentId:E,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u767B\u9332\u6570\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${E}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002`,backgroundColor:"nega"});continue}V.push(S)}A(S=>f(r({},S),{rawValue:[...S.rawValue,...V],eventType:"update",eventID:b(12),isInspected:!1})),D.value=""})},O),{opacity:"low",tabIndex:-1,value:""})),n(ae.List,r({},ie))]})},q=e=>(e=f(r({limit:1,isNameEditable:!0,useSystemOnly:!1,tone:"border",value:[]},e),{override:"force",cellStyles:r(r({},ce({tone:e.tone||"border"})),e.cellStyles)}),n(ue,{componentId:e.componentId,children:ye,states:e}));q.fn={openDialog:e=>{let{multiple:l,accept:o}=e,u=b();const t=document.createElement("input");t.type="file",t.multiple=!!l,t.value="",t.id=u,o&&(o=="image"?t.accept="image/png,image/jpeg,image/jpg,image/webp":t.accept=o),_("body").append(t),t.onchange=m=>{var a;let i=((a=m==null?void 0:m.target)==null?void 0:a.files)||[];if(!(i!=null&&i.length))return;let p=[];for(let d=0;d<i.length;d++){let I=i[d].clone();p.push(I)}e.onChange(p),_("#"+u).remove()},t.oncancel=()=>{_("#"+u).remove()},t.click()}},typeof window!="undefined"&&window.document&&_(document).onEvent("dragover",e=>{e.preventDefault(),k("."+y("AddButton")).addClass(y("Draggable"))},{passive:!1}).onEvent("drop",e=>{e.preventDefault(),k("."+y("AddButton")).removeClass(y("Draggable"));let l=e.dataTransfer.files;if(l.length){let o=e.target;if(k(o).hasClass(y("AddButton"))){let{componentId:u}=o.dataset,t=ee.get("AddFiles-"+u);t&&t(l)}}},{passive:!1});export{q as Filer,q as default};

package/dist/index.d.ts

@@ -81,6 +81,7 @@ declare const amotify: {
     pageRouter: utils.pageRouter.Methods;
     ColorRecords: {
         key: utils.Themecolor;
+        safeName?: string | undefined;
         isBrand?: true | undefined;
         hex: string;
     }[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.3.19",
+  "version": "0.3.21",
   "description": "UI Component for React,NextJS,esbuild",
   "scripts": {
     "start": "run-p clean build:*",