amotify 0.2.256 → 0.2.257
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/esbuild/designBook.tsx +58 -25
- package/demo/next/package.json +3 -3
- package/dist/@styles/componentClasses/index.css +1 -1
- package/dist/@styles/componentClasses/index.d.ts +0 -2
- package/dist/@styles/componentClasses/index.js +1 -1
- package/dist/@styles/index.css +1 -1
- package/dist/@styles/index.js +1 -1
- package/dist/@styles/style.css +1 -1
- package/dist/@styles/style.js +1 -1
- package/dist/atoms/index.d.ts +5 -8
- package/dist/atoms/index.js +1 -1
- package/dist/fn/Cropper.js +1 -1
- package/dist/fn/Input/Autocomplete.js +1 -1
- package/dist/fn/Input/Color.js +1 -1
- package/dist/fn/Input/Contenteditable.js +1 -1
- package/dist/fn/Input/DigitCharacters.js +1 -1
- package/dist/fn/Input/Drum.d.ts +38 -0
- package/dist/fn/Input/Drum.js +1 -0
- package/dist/fn/Input/Filer.js +1 -1
- package/dist/fn/Input/Hidden.js +1 -1
- package/dist/fn/Input/List.d.ts +1 -1
- package/dist/fn/Input/List.js +1 -1
- package/dist/fn/Input/Select.d.ts +0 -2
- package/dist/fn/Input/Select.js +1 -1
- package/dist/fn/Input/Slider.d.ts +44 -19
- package/dist/fn/Input/Slider.js +1 -1
- package/dist/fn/Input/Switch.js +1 -1
- package/dist/fn/Input/TextField.js +2 -2
- package/dist/fn/Input/Time/Selector.d.ts +10 -3
- package/dist/fn/Input/Time/Selector.js +1 -1
- package/dist/fn/Input/Time/index.d.ts +3 -1
- package/dist/fn/Input/Time/index.js +1 -1
- package/dist/fn/Input/core.d.ts +1 -1
- package/dist/fn/Input/core.js +1 -1
- package/dist/fn/Input/index.d.ts +10 -6
- package/dist/fn/Input/index.js +1 -1
- package/dist/fn/Loader/mini.js +1 -1
- package/dist/fn/Sheet.d.ts +1 -1
- package/dist/fn/Sheet.js +1 -1
- package/dist/index.d.ts +7 -3
- package/dist/orgs/index.d.ts +1 -0
- package/dist/temps/index.d.ts +1 -0
- package/package.json +2 -2
- package/demo/esbuild/public/index.js +0 -918
package/dist/@styles/style.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var r={Img:"_Img_1egfu_1",ShowExpand_true:"_ShowExpand_true_1egfu_11"};var a={};var t={Size_S:"_Size_S_10jdu_1",Size_R:"_Size_R_10jdu_6",Size_L:"_Size_L_10jdu_11",Size_2L:"_Size_2L_10jdu_16",Size_3L:"_Size_3L_10jdu_21",Icon:"_Icon_10jdu_27",Title:"_Title_10jdu_31",ComunIcon:"_ComunIcon_10jdu_38",ComunTitle:"_ComunTitle_10jdu_42",MingooIcon:"_MingooIcon_10jdu_46",P:"_P_10jdu_46",P_0:"_P_0_10jdu_50",P_1:"_P_1_10jdu_53",P_2:"_P_2_10jdu_56",P_3:"_P_3_10jdu_59",P_4:"_P_4_10jdu_62",P_5:"_P_5_10jdu_65",P_6:"_P_6_10jdu_68",P_7:"_P_7_10jdu_71",P_8:"_P_8_10jdu_74",P_9:"_P_9_10jdu_77",P_10:"_P_10_10jdu_81",P_11:"_P_11_10jdu_85",P_12:"_P_12_10jdu_89"};var _={Placeholder:"_Placeholder_rl2bi_14",Body:"_Body_rl2bi_14",PlaceholderEffect:"_PlaceholderEffect_rl2bi_1",Color_white:"_Color_white_rl2bi_25"};var l={Wrap:"_Wrap_13krz_1",Open_true:"_Open_true_13krz_1",Open_false:"_Open_false_13krz_4"};var e={Wrapper:"_Wrapper_1s842_1",Cell:"_Cell_1s842_9",FadeIn:"_FadeIn_1s842_13",FadeOut:"_FadeOut_1s842_17"};var c={Wrap:"_Wrap_1w12m_2",Content:"_Content_1w12m_5",BB:"_BB_1w12m_16",TapSensor:"_TapSensor_1w12m_19",isMainSheet_false:"_isMainSheet_false_1w12m_23",isMainSheet_true:"_isMainSheet_true_1w12m_26",Open:"_Open_1w12m_32",Hide:"_Hide_1w12m_38",Tcate_normal:"_Tcate_normal_1w12m_44",BaseBody:"_BaseBody_1w12m_48",Tcate_drawer:"_Tcate_drawer_1w12m_63",Tpos_left:"_Tpos_left_1w12m_63",Tpos_right:"_Tpos_right_1w12m_78",Tpos_bottom:"_Tpos_bottom_1w12m_93",DragBar:"_DragBar_1w12m_100",Tcate_custom:"_Tcate_custom_1w12m_108",CustomSheet:"_CustomSheet_1w12m_116",GPT:"_GPT_1w12m_119",Col_1:"_Col_1_1w12m_119",Row_1:"_Row_1_1w12m_119",Row_4:"_Row_4_1w12m_119",Col_4:"_Col_4_1w12m_119",Row_2:"_Row_2_1w12m_122",Row_5:"_Row_5_1w12m_122",Col_2:"_Col_2_1w12m_125",Col_5:"_Col_5_1w12m_125",GPT_3:"_GPT_3_1w12m_131",GPT_18:"_GPT_18_1w12m_131",GPT_8:"_GPT_8_1w12m_134",GPT_23:"_GPT_23_1w12m_134",GPT_11:"_GPT_11_1w12m_137",GPT_14:"_GPT_14_1w12m_137",GPT_12:"_GPT_12_1w12m_140",GPT_15:"_GPT_15_1w12m_140",Col_3:"_Col_3_1w12m_150",TapContent:"_TapContent_1w12m_166"};var i={Wrapper:"_Wrapper_jip2p_1",CornerLoader:"_CornerLoader_jip2p_17",Wrap:"_Wrap_jip2p_1",isActive:"_isActive_jip2p_28",ldAnm:"_ldAnm_jip2p_1",Ld1:"_Ld1_jip2p_34",Ld2:"_Ld2_jip2p_37",Ld3:"_Ld3_jip2p_40",Ld4:"_Ld4_jip2p_43",MiniLoader:"_MiniLoader_jip2p_61",Active_false:"_Active_false_jip2p_64",Hide:"_Hide_jip2p_67",Active:"_Active_jip2p_64",Core:"_Core_jip2p_77",spin:"_spin_jip2p_1",SVG1:"_SVG1_jip2p_85",loader:"_loader_jip2p_1",loading:"_loading_jip2p_1",SVG2:"_SVG2_jip2p_92"};var n={RootViewController:"_RootViewController_1uslg_2",Content:"_Content_1uslg_5",TopNav:"_TopNav_1uslg_14",FooterNav:"_FooterNav_1uslg_17",Body:"_Body_1uslg_20",SideNav:"_SideNav_1uslg_20",SwipeView:"_SwipeView_1uslg_27",Rail:"_Rail_1uslg_27",ShowOther_true:"_ShowOther_true_1uslg_27",Child:"_Child_1uslg_27",Display:"_Display_1uslg_35",LoopAdjusting:"_LoopAdjusting_1uslg_39"};var s={Wrap:"_Wrap_1rtvv_1",RowClickable_true:"_RowClickable_true_1rtvv_4",Row:"_Row_1rtvv_4",BodyRow:"_BodyRow_1rtvv_4",DataNotFound:"_DataNotFound_1rtvv_4",Cell:"_Cell_1rtvv_7",Table:"_Table_1rtvv_13",TableType_drag:"_TableType_drag_1rtvv_24",DraggerOrigin:"_DraggerOrigin_1rtvv_28",DragableButton:"_DragableButton_1rtvv_34",TableType_data:"_TableType_data_1rtvv_43",Console:"_Console_1rtvv_43",TableBase:"_TableBase_1rtvv_50",HeadRow:"_HeadRow_1rtvv_60",FilterRegion:"_FilterRegion_1rtvv_66",Filtering_true:"_Filtering_true_1rtvv_69"};var m={RippleElement:"_RippleElement_17vcx_1",Color_cloud:"_Color_cloud_17vcx_7",RippleWrap:"_RippleWrap_17vcx_7",Wave:"_Wave_17vcx_7",Color_theme:"_Color_theme_17vcx_10",PuddingEffect:"_PuddingEffect_17vcx_39",pdAnm:"_pdAnm_17vcx_1"};var d={Wrap:"_Wrap_8x4zl_1",Use_profile:"_Use_profile_8x4zl_4",Use_head:"_Use_head_8x4zl_7",Canvas:"_Canvas_8x4zl_11",Preview:"_Preview_8x4zl_17",ToneBall:"_ToneBall_8x4zl_21",ToneBall_1:"_ToneBall_1_8x4zl_25",ToneBall_2:"_ToneBall_2_8x4zl_28",ToneBall_3:"_ToneBall_3_8x4zl_31",ToneBall_4:"_ToneBall_4_8x4zl_34",ToneBall_5:"_ToneBall_5_8x4zl_37",ToneBall_6:"_ToneBall_6_8x4zl_40",ToneBall_7:"_ToneBall_7_8x4zl_43",ToneBall_8:"_ToneBall_8_8x4zl_46",ToneBall_9:"_ToneBall_9_8x4zl_49",ToneBall_10:"_ToneBall_10_8x4zl_52"};var b={Wrap:"_Wrap_11ave_1",isLocked_true:"_isLocked_true_11ave_16",Tone_sub_Color_theme:"_Tone_sub_Color_theme_11ave_21",Tone_clear_Color_theme:"_Tone_clear_Color_theme_11ave_21",Tone_sub_Color_posi:"_Tone_sub_Color_posi_11ave_24",Tone_clear_Color_posi:"_Tone_clear_Color_posi_11ave_24",Tone_sub_Color_nega:"_Tone_sub_Color_nega_11ave_27",Tone_clear_Color_nega:"_Tone_clear_Color_nega_11ave_27",Tone_sub_Color_warn:"_Tone_sub_Color_warn_11ave_30",Tone_clear_Color_warn:"_Tone_clear_Color_warn_11ave_30",Tone_sub_Color_white:"_Tone_sub_Color_white_11ave_33",Tone_clear_Color_white:"_Tone_clear_Color_white_11ave_33",Tone_sub_Color_cloud:"_Tone_sub_Color_cloud_11ave_36",Tone_clear_Color_cloud:"_Tone_clear_Color_cloud_11ave_36",Tone_sub_Color_layer:"_Tone_sub_Color_layer_11ave_39",Tone_clear_Color_layer:"_Tone_clear_Color_layer_11ave_39",isNeutral_true:"_isNeutral_true_11ave_43",Tone_clear:"_Tone_clear_11ave_21",Tone_borderToFill:"_Tone_borderToFill_11ave_46",Tone_fillToBorder:"_Tone_fillToBorder_11ave_49",Tone_fillToBorder_Color_white:"_Tone_fillToBorder_Color_white_11ave_52",Tone_fillToBorder_Color_cloud:"_Tone_fillToBorder_Color_cloud_11ave_52",Tone_link:"_Tone_link_11ave_55",Tone_normal_Color_plain:"_Tone_normal_Color_plain_11ave_62",Tone_normal_Color_theme:"_Tone_normal_Color_theme_11ave_66",Tone_normal_Color_posi:"_Tone_normal_Color_posi_11ave_70",Tone_normal_Color_nega:"_Tone_normal_Color_nega_11ave_74",Tone_normal_Color_warn:"_Tone_normal_Color_warn_11ave_78",Tone_border:"_Tone_border_11ave_46",Tone_prime:"_Tone_prime_11ave_85",Tone_borderToFill_Color_white:"_Tone_borderToFill_Color_white_11ave_120",Tone_borderToFill_Color_cloud:"_Tone_borderToFill_Color_cloud_11ave_120"};var
|
|
1
|
+
var r={Img:"_Img_1egfu_1",ShowExpand_true:"_ShowExpand_true_1egfu_11"};var a={};var t={Size_S:"_Size_S_10jdu_1",Size_R:"_Size_R_10jdu_6",Size_L:"_Size_L_10jdu_11",Size_2L:"_Size_2L_10jdu_16",Size_3L:"_Size_3L_10jdu_21",Icon:"_Icon_10jdu_27",Title:"_Title_10jdu_31",ComunIcon:"_ComunIcon_10jdu_38",ComunTitle:"_ComunTitle_10jdu_42",MingooIcon:"_MingooIcon_10jdu_46",P:"_P_10jdu_46",P_0:"_P_0_10jdu_50",P_1:"_P_1_10jdu_53",P_2:"_P_2_10jdu_56",P_3:"_P_3_10jdu_59",P_4:"_P_4_10jdu_62",P_5:"_P_5_10jdu_65",P_6:"_P_6_10jdu_68",P_7:"_P_7_10jdu_71",P_8:"_P_8_10jdu_74",P_9:"_P_9_10jdu_77",P_10:"_P_10_10jdu_81",P_11:"_P_11_10jdu_85",P_12:"_P_12_10jdu_89"};var _={Placeholder:"_Placeholder_rl2bi_14",Body:"_Body_rl2bi_14",PlaceholderEffect:"_PlaceholderEffect_rl2bi_1",Color_white:"_Color_white_rl2bi_25"};var l={Wrap:"_Wrap_13krz_1",Open_true:"_Open_true_13krz_1",Open_false:"_Open_false_13krz_4"};var e={Wrapper:"_Wrapper_1s842_1",Cell:"_Cell_1s842_9",FadeIn:"_FadeIn_1s842_13",FadeOut:"_FadeOut_1s842_17"};var c={Wrap:"_Wrap_1w12m_2",Content:"_Content_1w12m_5",BB:"_BB_1w12m_16",TapSensor:"_TapSensor_1w12m_19",isMainSheet_false:"_isMainSheet_false_1w12m_23",isMainSheet_true:"_isMainSheet_true_1w12m_26",Open:"_Open_1w12m_32",Hide:"_Hide_1w12m_38",Tcate_normal:"_Tcate_normal_1w12m_44",BaseBody:"_BaseBody_1w12m_48",Tcate_drawer:"_Tcate_drawer_1w12m_63",Tpos_left:"_Tpos_left_1w12m_63",Tpos_right:"_Tpos_right_1w12m_78",Tpos_bottom:"_Tpos_bottom_1w12m_93",DragBar:"_DragBar_1w12m_100",Tcate_custom:"_Tcate_custom_1w12m_108",CustomSheet:"_CustomSheet_1w12m_116",GPT:"_GPT_1w12m_119",Col_1:"_Col_1_1w12m_119",Row_1:"_Row_1_1w12m_119",Row_4:"_Row_4_1w12m_119",Col_4:"_Col_4_1w12m_119",Row_2:"_Row_2_1w12m_122",Row_5:"_Row_5_1w12m_122",Col_2:"_Col_2_1w12m_125",Col_5:"_Col_5_1w12m_125",GPT_3:"_GPT_3_1w12m_131",GPT_18:"_GPT_18_1w12m_131",GPT_8:"_GPT_8_1w12m_134",GPT_23:"_GPT_23_1w12m_134",GPT_11:"_GPT_11_1w12m_137",GPT_14:"_GPT_14_1w12m_137",GPT_12:"_GPT_12_1w12m_140",GPT_15:"_GPT_15_1w12m_140",Col_3:"_Col_3_1w12m_150",TapContent:"_TapContent_1w12m_166"};var i={Wrapper:"_Wrapper_jip2p_1",CornerLoader:"_CornerLoader_jip2p_17",Wrap:"_Wrap_jip2p_1",isActive:"_isActive_jip2p_28",ldAnm:"_ldAnm_jip2p_1",Ld1:"_Ld1_jip2p_34",Ld2:"_Ld2_jip2p_37",Ld3:"_Ld3_jip2p_40",Ld4:"_Ld4_jip2p_43",MiniLoader:"_MiniLoader_jip2p_61",Active_false:"_Active_false_jip2p_64",Hide:"_Hide_jip2p_67",Active:"_Active_jip2p_64",Core:"_Core_jip2p_77",spin:"_spin_jip2p_1",SVG1:"_SVG1_jip2p_85",loader:"_loader_jip2p_1",loading:"_loading_jip2p_1",SVG2:"_SVG2_jip2p_92"};var n={RootViewController:"_RootViewController_1uslg_2",Content:"_Content_1uslg_5",TopNav:"_TopNav_1uslg_14",FooterNav:"_FooterNav_1uslg_17",Body:"_Body_1uslg_20",SideNav:"_SideNav_1uslg_20",SwipeView:"_SwipeView_1uslg_27",Rail:"_Rail_1uslg_27",ShowOther_true:"_ShowOther_true_1uslg_27",Child:"_Child_1uslg_27",Display:"_Display_1uslg_35",LoopAdjusting:"_LoopAdjusting_1uslg_39"};var s={Wrap:"_Wrap_1rtvv_1",RowClickable_true:"_RowClickable_true_1rtvv_4",Row:"_Row_1rtvv_4",BodyRow:"_BodyRow_1rtvv_4",DataNotFound:"_DataNotFound_1rtvv_4",Cell:"_Cell_1rtvv_7",Table:"_Table_1rtvv_13",TableType_drag:"_TableType_drag_1rtvv_24",DraggerOrigin:"_DraggerOrigin_1rtvv_28",DragableButton:"_DragableButton_1rtvv_34",TableType_data:"_TableType_data_1rtvv_43",Console:"_Console_1rtvv_43",TableBase:"_TableBase_1rtvv_50",HeadRow:"_HeadRow_1rtvv_60",FilterRegion:"_FilterRegion_1rtvv_66",Filtering_true:"_Filtering_true_1rtvv_69"};var m={RippleElement:"_RippleElement_17vcx_1",Color_cloud:"_Color_cloud_17vcx_7",RippleWrap:"_RippleWrap_17vcx_7",Wave:"_Wave_17vcx_7",Color_theme:"_Color_theme_17vcx_10",PuddingEffect:"_PuddingEffect_17vcx_39",pdAnm:"_pdAnm_17vcx_1"};var d={Wrap:"_Wrap_8x4zl_1",Use_profile:"_Use_profile_8x4zl_4",Use_head:"_Use_head_8x4zl_7",Canvas:"_Canvas_8x4zl_11",Preview:"_Preview_8x4zl_17",ToneBall:"_ToneBall_8x4zl_21",ToneBall_1:"_ToneBall_1_8x4zl_25",ToneBall_2:"_ToneBall_2_8x4zl_28",ToneBall_3:"_ToneBall_3_8x4zl_31",ToneBall_4:"_ToneBall_4_8x4zl_34",ToneBall_5:"_ToneBall_5_8x4zl_37",ToneBall_6:"_ToneBall_6_8x4zl_40",ToneBall_7:"_ToneBall_7_8x4zl_43",ToneBall_8:"_ToneBall_8_8x4zl_46",ToneBall_9:"_ToneBall_9_8x4zl_49",ToneBall_10:"_ToneBall_10_8x4zl_52"};var b={Wrap:"_Wrap_11ave_1",isLocked_true:"_isLocked_true_11ave_16",Tone_sub_Color_theme:"_Tone_sub_Color_theme_11ave_21",Tone_clear_Color_theme:"_Tone_clear_Color_theme_11ave_21",Tone_sub_Color_posi:"_Tone_sub_Color_posi_11ave_24",Tone_clear_Color_posi:"_Tone_clear_Color_posi_11ave_24",Tone_sub_Color_nega:"_Tone_sub_Color_nega_11ave_27",Tone_clear_Color_nega:"_Tone_clear_Color_nega_11ave_27",Tone_sub_Color_warn:"_Tone_sub_Color_warn_11ave_30",Tone_clear_Color_warn:"_Tone_clear_Color_warn_11ave_30",Tone_sub_Color_white:"_Tone_sub_Color_white_11ave_33",Tone_clear_Color_white:"_Tone_clear_Color_white_11ave_33",Tone_sub_Color_cloud:"_Tone_sub_Color_cloud_11ave_36",Tone_clear_Color_cloud:"_Tone_clear_Color_cloud_11ave_36",Tone_sub_Color_layer:"_Tone_sub_Color_layer_11ave_39",Tone_clear_Color_layer:"_Tone_clear_Color_layer_11ave_39",isNeutral_true:"_isNeutral_true_11ave_43",Tone_clear:"_Tone_clear_11ave_21",Tone_borderToFill:"_Tone_borderToFill_11ave_46",Tone_fillToBorder:"_Tone_fillToBorder_11ave_49",Tone_fillToBorder_Color_white:"_Tone_fillToBorder_Color_white_11ave_52",Tone_fillToBorder_Color_cloud:"_Tone_fillToBorder_Color_cloud_11ave_52",Tone_link:"_Tone_link_11ave_55",Tone_normal_Color_plain:"_Tone_normal_Color_plain_11ave_62",Tone_normal_Color_theme:"_Tone_normal_Color_theme_11ave_66",Tone_normal_Color_posi:"_Tone_normal_Color_posi_11ave_70",Tone_normal_Color_nega:"_Tone_normal_Color_nega_11ave_74",Tone_normal_Color_warn:"_Tone_normal_Color_warn_11ave_78",Tone_border:"_Tone_border_11ave_46",Tone_prime:"_Tone_prime_11ave_85",Tone_borderToFill_Color_white:"_Tone_borderToFill_Color_white_11ave_120",Tone_borderToFill_Color_cloud:"_Tone_borderToFill_Color_cloud_11ave_120"};var g={CustomScrollBar:"_CustomScrollBar_15t6q_1",Wrapper:"_Wrapper_15t6q_15",Input:"_Input_15t6q_54",DigitCharacterCell:"_DigitCharacterCell_15t6q_85",Combined:"_Combined_15t6q_85",ShowCell:"_ShowCell_15t6q_1"};var h={Input:"_Input_1g1ty_1",List:"_List_1g1ty_1",AddButton:"_AddButton_1g1ty_1",FileName:"_FileName_1g1ty_5",Draggable:"_Draggable_1g1ty_18",AddIcon:"_AddIcon_1g1ty_21",IconAnimation:"_IconAnimation_1g1ty_1"};var p={CellBase:"_CellBase_xuhga_1",HideInput_true:"_HideInput_true_xuhga_1",Input:"_Input_xuhga_1",Label:"_Label_xuhga_5"};var f={Core:"_Core_1psny_1",SelectedCell:"_SelectedCell_1psny_5",Selector:"_Selector_1psny_9"};var v={Input:"_Input_1lndc_1",Label:"_Label_1lndc_7"};var u={Wrap:"_Wrap_1jwam_1",Bar:"_Bar_1jwam_1",Range:"_Range_1jwam_4",Field:"_Field_1jwam_4",Child:"_Child_1jwam_7",Legend:"_Legend_1jwam_10",Edge:"_Edge_1jwam_25",EdgeChild:"_EdgeChild_1jwam_25"};var w={ClockBase:"_ClockBase_1bc8v_1",ClockUiBase:"_ClockUiBase_1bc8v_1",ClockUi:"_ClockUi_1bc8v_1",Needle:"_Needle_1bc8v_5",hour:"_hour_1bc8v_12",minute:"_minute_1bc8v_17"};var k={Label:"_Label_1kvwn_1",Tone_plain:"_Tone_plain_1kvwn_6",Checked:"_Checked_1kvwn_6",Tone_cloud:"_Tone_cloud_1kvwn_9",Tone_cloudmono:"_Tone_cloudmono_1kvwn_12",Tone_cloudtheme:"_Tone_cloudtheme_1kvwn_15",Tone_bordervivid:"_Tone_bordervivid_1kvwn_21",Tone_bottomline:"_Tone_bottomline_1kvwn_27"};var xr=o=>r[o],yr=o=>a[o],Tr=o=>t[o],Cr=o=>_[o],Hr=o=>l[o],zr=o=>e[o],Lr=o=>c[o],Sr=o=>i[o],Br=o=>n[o],jr=o=>s[o],Wr=o=>m[o],Nr=o=>d[o],Rr=o=>b[o],Pr=o=>g[o],Ir=o=>h[o],Gr=o=>p[o],Ar=o=>f[o],Fr=o=>v[o],Yr=o=>u[o],Mr=o=>w[o],Or=o=>k[o];export{Hr as AccordionClasses,Rr as ButtonClasses,Nr as CropperClasses,Wr as EffectClasses,yr as GridClasses,xr as ImgClasses,Ar as InputAutocompleteClasses,Pr as InputClasses,Ir as InputFilerClasses,Gr as InputListClasses,Or as InputSegmentedClasses,Yr as InputSliderClasses,Fr as InputSwitchClasses,Mr as InputTimeClasses,Br as LayoutClasses,Sr as LoaderClasses,Tr as LogoClasses,Cr as PlaceholderClasses,Lr as SheetClasses,zr as SnackbarClasses,jr as TableClasses};
|
package/dist/atoms/index.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ export * from './Box';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { ReactElement } from 'src/@declares';
|
|
4
4
|
import Box from './Box';
|
|
5
|
-
import { KeyValueDict } from 'jmini';
|
|
6
5
|
/**
|
|
7
6
|
* Span
|
|
8
7
|
*/
|
|
@@ -34,17 +33,15 @@ declare namespace Column {
|
|
|
34
33
|
}
|
|
35
34
|
declare const Column: React.FC<Column.Input>;
|
|
36
35
|
/**
|
|
37
|
-
*
|
|
36
|
+
* CacheRender
|
|
38
37
|
*/
|
|
39
|
-
declare
|
|
40
|
-
|
|
38
|
+
declare const CacheRender: {
|
|
39
|
+
<T = any>(props: {
|
|
41
40
|
params: T;
|
|
42
41
|
children: ReactElement;
|
|
43
42
|
forceRender?: (prev: Readonly<T>, next: Readonly<T>) => boolean;
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
declare const CacheRender: CacheRender.Component<KeyValueDict<any>>;
|
|
43
|
+
}): ReactElement;
|
|
44
|
+
};
|
|
48
45
|
export { Span, P, Flex, FlexBr, FlexMargin, Column, CacheRender };
|
|
49
46
|
export * from './FAI';
|
|
50
47
|
export * from './Img';
|
package/dist/atoms/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as t,c as n}from"../chunk-C5N2D3ZX.js";import{jsx as o}from"react/jsx-runtime";export*from"./Box";import l from"react";import
|
|
1
|
+
import{b as t,c as n}from"../chunk-C5N2D3ZX.js";import{jsx as o}from"react/jsx-runtime";export*from"./Box";import l from"react";import r from"./Box";const m=e=>o(r,n(t({},e),{htmlTag:"span"})),x=e=>o(r,n(t({},e),{htmlTag:"p"})),p=e=>o(r,n(t({flexType:"row",flexWrap:!0,display:"flex"},e),{freeCSS:t({wordBreak:"break-word"},e.freeCSS)})),c=e=>o(r,t({width:1,flexSizing:"none"},e)),f=e=>o(r,t({flexSizing:0},e)),u=e=>o(p,t({flexType:"col",gap:1},e)),s=l.memo(e=>e.children,(e,a)=>e.forceRender?!e.forceRender(e.params,a.params):!1);export*from"./FAI";export*from"./Img";export*from"./Logo";export*from"./Placeholder";export*from"./Card";export*from"./Grid";export{s as CacheRender,u as Column,p as Flex,c as FlexBr,f as FlexMargin,x as P,m as Span};
|
package/dist/fn/Cropper.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as Z,c as le,e as O}from"../chunk-C5N2D3ZX.js";import{Fragment as Ce,jsx as o,jsxs as m}from"react/jsx-runtime";import C,{Filer as he,UUID as pe,useStore as q}from"jmini";import{$$fromRoot as ne}from"../@utils";import{useState as z,useEffect as ee}from"react";import{Box as X,FAI as H,Column as J,FlexMargin as me}from"../atoms";import{Row as B,Literal as w}from"../mols";import{Button as k}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 fe}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as ge}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as de}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as V}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,n]=C.is.array(e.use)&&e.use||e.use.split(":").map(r=>Number(r)),p=h/n;this.usage={w:h,h:n,aspect:p}}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,l=a/i;this.Picture={elm:t,originDataUrl:t.src,aspect:l,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/l*this.usage.aspect:this.scale.min=100*l/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,v=e.height*(2/3);a=t=Math.min(s,v)}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:l}=c,h=(e.width-t)/2,n=(e.height-a)/2,p=t/a;this.pst={frame:{x:h,y:n,w:t,h:a,aspect:p},outImage:{x:0,y:0,w:0,h:0},imageX:i/2,imageY:l/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:l}=this.dragEffectInfo,h=i.x-t,n=i.y-a,p=this.scale.current*this.Picture.revisedAspect/100,r=h/p*l.x,s=n/p*l.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}=C.getCursor(t.touches[0]),{x:l,y:h}=C.getCursor(t.touches[1]),n=l-a,p=h-i;if(c=="start")this.pinchEffectInfo.origin={x:n,y:p,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)),S=Math.sqrt(Math.pow(n,2)+Math.pow(p,2))/s,g=Number(r.scale*S);this.set_scale(g)}}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 O(this,null,function*(){let{grayScale:e,tone:c,rotate:t}=this.Picture;const a=document.createElement("canvas");let i=a.getContext("2d"),l=yield C.ImageLoader(this.Picture.originDataUrl),h=l.width,n=l.height;(t==90||t==270)&&(h=l.height,n=l.width),a.width=h,a.height=n,e&&(i.filter="grayscale("+e+"%)"),t&&(i.translate(h/2,n/2),i.rotate(t*Math.PI/180),[90,270].includes(t)?i.translate(-n/2,-h/2):i.translate(-h/2,-n/2)),i.drawImage(l,0,0,l.width,l.height);let p=i.getImageData(0,0,a.width,a.height),r=p.data;{e/=100;let g=[[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=g[0]/255,d=g[1]/255,E=g[2]/255;for(let x=0;x<n;x++)for(let b=0;b<h;b++){var s=(x*h+b)*4;if(e){let D=.3*r[s]+.59*r[s+1]+.11*r[s+2];for(var v=0;v<3;v++){let R=r[s+v];r[s+v]=R+(D-R)*e}}r[s]*=y,r[s+1]*=d,r[s+2]*=E}}i.putImageData(p,0,0);let S=a.toDataURL("image/jpeg");{let g=yield C.ImageLoader(S),{width:y,height:d}=g,E=y/d;this.Picture=le(Z({},this.Picture),{elm:g,aspect:E,revisedAspect:this.pst.frame.aspect>E?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 l=e||this.pst.imageX,h=c||this.pst.imageY;{let n=this.scale.current/100,p=this.Picture.revisedAspect*n,r=this.pst.centerX-l*p,s=this.pst.centerY-h*p,v=this.Picture.elm.width*p,S=this.Picture.elm.height*p,g=0,y=0;this.usage.aspect<this.Picture.aspect?(g=v,y=g/this.usage.aspect):(y=S,g=y*this.usage.aspect);{let d=this.pst.frame.x-(v-g)/2,E=this.pst.frame.x+this.pst.frame.w-(v+g)/2,x=this.pst.frame.y-(S-y)/2,b=this.pst.frame.y+this.pst.frame.h-(S+y)/2,D=0;r<E&&(D=r-E),r>d&&(D=r-d);let R=0;s<b&&(R=s-b),s>x&&(R=s-x),this.dragEffectInfo.origin.x+=D/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=R/2/this.dragEffectInfo.frameExpandRate.y,r=Math.min(Math.max(r,E),d),s=Math.min(Math.max(s,b),x)}this.pst.outImage={x:r,y:s,w:v,h:S};{let d=1;t.lineWidth=d,t.strokeStyle="#ffffff66",t.strokeRect(r+(v-g)/2-d,s+(S-y)/2-d,g+d*2,y+d*2)}t.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,r,s,v,S)}{if(this.usage.aspect==1){t.fillStyle="rgba( 20,24,20,.5 )",t.beginPath();let n=a.width/3*2,p=a.height/3*2,r=Math.min(n,p),s=Math.max(n,p);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 p=C(document.body).getStyleProperty("--color-theme-hsl"),r=2;t.lineWidth=r,t.strokeStyle=`hsla( ${p},1 )`,t.strokeRect(i.x-r,i.y-r,i.w+r*2,i.h+r*2)}}}export(){return O(this,null,function*(){let{Canvas:e,develops:c,Picture:t,pst:{outImage:a,frame:i}}=this,l=a.w/t.elm.width,h=a.h/t.elm.height,n=(i.x-a.x)/l,p=i.w/l,r=(i.y-a.y)/h,s=i.h/h,v=Array.from({length:c.length}),S="image/jpeg";for(let g=0;g<c.length;g++){let{size:y,maxSize:d}=c[g];d=d||{S:1024*20,R:1024*100,L:1024*350}[y];let E={S:140,R:600,L:1200}[y],x=document.createElement("canvas");x.width=p,x.height=s;let b=document.createElement("canvas");b.width=E,b.height=E/this.usage.aspect;let D=x.getContext("2d");if(!D)return;let R=b.getContext("2d");if(!R)return;D.clearRect(0,0,x.width,x.height),D.drawImage(this.Picture.elm,n,r,p,s,0,0,p,s),R.fillStyle="black",R.drawImage(x,0,0,x.width,x.height,0,0,b.width,b.height);let $=b.toDataURL(S),A=yield $.toBlob(S);if(!A)return;if(A.size>=d){let ie=d/A.size;if($=b.toDataURL(S,ie*.92),A=yield $.toBlob(S),!A)return}let re=new File([A],this.val_file.name,{type:S});v[g]=re}return v})}}const se={Core:u=>{let{val_file:e,options:c,finishedCallback:t,abortCallback:a}=u,{use:i,develops:l=[]}=c,[h]=z(pe());const n={scale:{default:120,min:50,max:300},rotate:0,grayScale:0,tone:0};let p=2048*2048,r=1024,[s,v]=z("init"),[S,g]=z(""),[y,d]=z(n.scale.default),[E,x]=z(n.rotate),[b,D]=z(n.grayScale),[R,$]=z(n.tone),[A,re]=z(-1),[ie,ce]=z(-1);return ee(()=>{let f="CropperResize";return C(window).addEvent({eventType:"resize",eventID:f,callback:()=>{C.interval.once(()=>{var G;let I=ne("#Canvas-"+h)[0];if(!I)return;let P=(G=q.get(h))==null?void 0:G.Instance;if(!P)return;let W=I.position(),U=W.width/W.height,Y=r,F=Y/U;if(Y*F>p){let K=Y*F/p;Y=Math.floor(Y/Math.sqrt(K)),F=Math.floor(F/Math.sqrt(K))}I.width=r,I.height=F;let{width:L,height:Q}=I;P.pst.centerX=L/2,P.pst.centerY=Q/2,P.frameSizing(),P.modifyImage()},250,"CropperResize")}}),()=>{C(window).removeEvent(f)}},[]),ee(()=>{q.set({[h]:{}}),O(void 0,null,function*(){try{let f=ne("#Canvas-"+h)[0];if(!f)return;let I=f.position(),P=I.width/I.height,W=r,U=W/P;if(W*U>p){let _=W*U/p;W=Math.floor(W/Math.sqrt(_)),U=Math.floor(U/Math.sqrt(_))}f.width=W,f.height=U;let Y=he(e),F=yield C.ImageLoader(yield Y.toObjectURL());re(F.width),ce(F.height);let L=new ve({set_scale:d,val_file:e,develops:l,use:i,scale:n.scale,componentId:h,canvas:f,picture:{image:F,grayScale:n.grayScale,tone:n.tone,rotate:n.rotate}});q.set({[h]:{Instance:L}});const Q=function(_){if(_.preventDefault(),_.touches&&_.touches.length>1)L.pinchEffect({eventType:"start",event:_}),C(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:M=>{M.preventDefault(),L.pinchEffect({eventType:"move",event:M})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:K});else{L.dragEffect(Z({eventType:"start"},C.getCursor(_)));let{type:M}=_;C(document).addEvent({eventType:M=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:T=>{G("move",T)}}).addEvent({eventType:M=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:T=>{G("end",T),K(T)}})}},G=function(_,M){M.preventDefault(),L.dragEffect(Z({eventType:_},C.getCursor(M)))},K=function(_){_.preventDefault(),C(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};C(f).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:_=>{_.preventDefault();let M=Number(_.wheelDelta*.04),T=L.scale.current+M;T=Math.max(T,L.scale.min),T=Math.min(T,L.scale.max),d(T)},options:{passive:!1}}).addEvent({eventType:"touchstart",eventID:"CropperTouchStart",callback:Q,options:{passive:!1}}).addEvent({eventType:"mousedown",eventID:"CropperMouseDown",callback:Q,options:{passive:!1}}),yield C.pending(()=>{},1e3),v("ok")}catch(f){v("error"),g((f==null?void 0:f.message)||C.Stringify(f)),console.error(f)}})},[e.id]),ee(()=>{var I;let f=(I=q.get(h))==null?void 0:I.Instance;f&&f.updateScale(y)},[y]),ee(()=>{var I;let f=(I=q.get(h))==null?void 0:I.Instance;f&&f.updateFilter({grayScale:b,tone:R,rotate:E})},[b,R,E]),o(N.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:m(J,{className:[V("Wrap"),V("Use_"+i)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[m(X,{position:"absolute",top:"50%",left:"50%",flexCenter:!0,freeCSS:{zIndex:2,transform:"translate( -50%,-50% )",pointerEvents:"none"},children:[s=="init"&&o(te.Theme.XL,{showInitial:!0}),s=="error"&&m(w.Supplement,{fontColor:"nega",children:["\u753B\u50CF\u306E\u8AAD\u307F\u8FBC\u307F\u306B\u5931\u6557\u3057\u307E\u3057\u305F",o(w.Description,{children:S})]})]}),m(X,{flexSizing:0,overflow:"hidden",position:"relative",flexCenter:!0,paddingBottom:6,freeCSS:{zIndex:1,backgroundColor:"#000f0f"},children:[o("canvas",{style:{width:"100%",height:"100%"},width:r,height:r,className:V("Canvas"),id:"Canvas-"+h}),o(w.Supplement,{position:"absolute",bottom:1,left:1,right:1,ssCardBox:"plain",boxShadow:"0.max",padding:1,backgroundColor:"layer.0.opa.few",freeCSS:{backdropFilter:"blur(6px)"},children:m(J,{gap:"1/2",children:[m(B.Left,{gap:"1/2",flexWrap:!0,fontColor:"white",fontSize:"0.xs",fontHeight:1.2,children:[m(w,{children:["[",e.type,"]"]}),o(w,{children:e.name}),m(w,{children:[A,"px x ",ie,"px"]}),m(w,{children:["[",e.size.rank(),"B]"]})]}),m(B.Left,{gap:"1/2",verticalAlign:"unset",flexWrap:!0,children:[o(se.SettingRegion,{DefaultOptions:n,val_scale:y,set_scale:d,val_tone:R,set_tone:$,val_grayScale:b,set_grayScale:D,val_rotate:E,set_rotate:x}),o(me,{}),o(k.Border.S,{onClick:()=>{a()},children:"\u9589\u3058\u308B"}),o(k.Prime.S,{boxShadow:"3.remark",onClick:()=>O(void 0,null,function*(){var P;let f=(P=q.get(h))==null?void 0:P.Instance;if(!f)return;te.fn.mini.active("CropperExportation");let I=yield f.export();setTimeout(()=>{te.fn.mini.stop("CropperExportation"),t(I)},1e3)}),children:m(B.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 m(Ce,{children:[m(B.Center,{gap:"1/6",children:[m(k.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(H,{icon:ge,fontColor:"4.thin"})]}),m(k.Border.S,{flexCenter:!0,gap:"1/4",border:"unset",borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{u.set_rotate((u.val_rotate+90)%360)},children:[o(H,{icon:de,fontColor:"4.thin"}),o(w,{children:"90\xB0"})]})]}),m(k.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperZoomEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:o(N.Body,{children:m(J,{padding:1.5,children:[m(B.Separate,{children:[o(w.Paragraph,{children:m(B.Center,{gap:"1/2",children:[o(H.Search,{fontColor:"5.translucent"}),"Zoom"]})}),o(k.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(H.X,{})})]}),o(X,{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,l)=>{C.interval.once(()=>{u.set_scale(i+100)},250,"Cropper.UpdateScale")},legends:{enable:!0,custom:i=>"x"+Math.round(100+i)/100}})]})})})},children:[o(w.Supplement,{fontSize:"0.xs",fontColor:"4.thin",children:"Zoom"}),m(w,{unitWidth:4,children:[u.val_scale.rate(1,0),"%"]})]}),m(k.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperGrayScaleEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:o(N.Body,{children:m(J,{padding:1.5,children:[m(B.Separate,{children:[o(w.Paragraph,{children:m(B.Center,{gap:"1/2",children:[o(H,{icon:ue,fontColor:"5.translucent"}),"Gray Scale"]})}),o(k.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(H.X,{})})]}),o(X,{borderBottom:!0,opacity:"low"}),o(ae.Slider,{value:u.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:i=>{C.interval.once(()=>{u.set_grayScale(i)},250,"Cropper.GrayScale")},legends:{enable:!0,custom:i=>i+"%"}})]})})})},children:[o(w.Supplement,{fontSize:"0.xs",fontColor:"4.thin",children:"GrayScale"}),m(w,{children:[u.val_grayScale.rate(1,0),"%"]})]}),m(k.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperToneEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,freeCSS:{minWidth:12*26,maxWidth:12*24},content:()=>{let i=[];for(let l=1;l<=10;l++)i.push({value:l,label:m(B.Left,{gap:"1/3",children:[o(X,{ssSphere:1,className:[V("ToneBall"),V("ToneBall_"+l)].join(" ")}),o(X,{textAlign:"left",flexSizing:0,children:c(l)})]})});return o(N.Body,{children:m(J,{padding:1.5,children:[m(B.Separate,{children:[o(w.Paragraph,{children:m(B.Center,{gap:"1/2",children:[o(H,{icon:fe,fontColor:"5.translucent"}),"Tone"]})}),o(k.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(H.X,{})})]}),o(X,{borderBottom:!0,opacity:"low"}),o(ae.Radio.Normal,{value:u.val_tone,gap:"1/2",cellStyles:{fontColor:"3.blur"},options:[{value:0,label:o(X,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...i],onUpdateValidValue:l=>{u.set_tone(l)}})]})})}})},children:[o(w.Supplement,{fontSize:"0.xs",fontColor:"4.thin",children:"Tone"}),o(X,{boxShadow:"2.remark",ssSphere:1,className:[V("ToneBall"),V("ToneBall_"+u.val_tone)].join(" ")}),c(u.val_tone)]})]})}},oe={openDialogNEdit:u=>{ae.Filer.fn.openDialog({accept:"image",multiple:!1,onChange:e=>{oe.openEditor(Z({imageFile:e[0]},u))}})},openEditor:u=>O(void 0,null,function*(){let e="CropperImage";N.open("middleCenter",{sheetID:e,size:"MAX",padding:0,margin:0,freeCSS:{maxWidth:"100%"},content:o(se.Core,{val_file:u.imageFile,options:u,finishedCallback:c=>{N.close(e),u.onProcessFinished(c)},abortCallback:()=>{N.close(e)}}),closeAtEscapeKeyDown:!1})})};export{oe as Cropper,oe as default};
|
|
1
|
+
import{b as Z,c as ne,e as O}from"../chunk-C5N2D3ZX.js";import{Fragment as Ce,jsx as o,jsxs as m}from"react/jsx-runtime";import C,{Filer as he,UUID as pe,useStore as q}from"jmini";import{$$fromRoot as le}from"../@utils";import{useState as z,useEffect as ee}from"react";import{Box as X,FAI as H,Column as J,FlexMargin as me}from"../atoms";import{Row as B,Literal as w}from"../mols";import{Button as k}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 fe}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as ge}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as de}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as V}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]=C.is.array(e.use)&&e.use||e.use.split(":").map(r=>Number(r)),p=h/l;this.usage={w:h,h:l,aspect:p}}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,v=e.height*(2/3);a=t=Math.min(s,v)}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,p=t/a;this.pst={frame:{x:h,y:l,w:t,h:a,aspect:p},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,p=this.scale.current*this.Picture.revisedAspect/100,r=h/p*n.x,s=l/p*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}=C.getCursor(t.touches[0]),{x:n,y:h}=C.getCursor(t.touches[1]),l=n-a,p=h-i;if(c=="start")this.pinchEffectInfo.origin={x:l,y:p,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)),S=Math.sqrt(Math.pow(l,2)+Math.pow(p,2))/s,g=Number(r.scale*S);this.set_scale(g)}}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 O(this,null,function*(){let{grayScale:e,tone:c,rotate:t}=this.Picture;const a=document.createElement("canvas");let i=a.getContext("2d"),n=yield C.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),[90,270].includes(t)?i.translate(-l/2,-h/2):i.translate(-h/2,-l/2)),i.drawImage(n,0,0,n.width,n.height);let p=i.getImageData(0,0,a.width,a.height),r=p.data;{e/=100;let g=[[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=g[0]/255,d=g[1]/255,R=g[2]/255;for(let x=0;x<l;x++)for(let b=0;b<h;b++){var s=(x*h+b)*4;if(e){let D=.3*r[s]+.59*r[s+1]+.11*r[s+2];for(var v=0;v<3;v++){let E=r[s+v];r[s+v]=E+(D-E)*e}}r[s]*=y,r[s+1]*=d,r[s+2]*=R}}i.putImageData(p,0,0);let S=a.toDataURL("image/jpeg");{let g=yield C.ImageLoader(S),{width:y,height:d}=g,R=y/d;this.Picture=ne(Z({},this.Picture),{elm:g,aspect:R,revisedAspect:this.pst.frame.aspect>R?this.pst.frame.w/y:this.pst.frame.h/d})}this.drawImage()})}drawImage(e,c){let{Canvas:{ctx:t,elm:a},pst:{frame:i}}=this;t.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height);let n=e||this.pst.imageX,h=c||this.pst.imageY;{let l=this.scale.current/100,p=this.Picture.revisedAspect*l,r=this.pst.centerX-n*p,s=this.pst.centerY-h*p,v=this.Picture.elm.width*p,S=this.Picture.elm.height*p,g=0,y=0;this.usage.aspect<this.Picture.aspect?(g=v,y=g/this.usage.aspect):(y=S,g=y*this.usage.aspect);{let d=this.pst.frame.x-(v-g)/2,R=this.pst.frame.x+this.pst.frame.w-(v+g)/2,x=this.pst.frame.y-(S-y)/2,b=this.pst.frame.y+this.pst.frame.h-(S+y)/2,D=0;r<R&&(D=r-R),r>d&&(D=r-d);let E=0;s<b&&(E=s-b),s>x&&(E=s-x),this.dragEffectInfo.origin.x+=D/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=E/2/this.dragEffectInfo.frameExpandRate.y,r=Math.min(Math.max(r,R),d),s=Math.min(Math.max(s,b),x)}this.pst.outImage={x:r,y:s,w:v,h:S};{let d=1;t.lineWidth=d,t.strokeStyle="#ffffff66",t.strokeRect(r+(v-g)/2-d,s+(S-y)/2-d,g+d*2,y+d*2)}t.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,r,s,v,S)}{if(this.usage.aspect==1){t.fillStyle="rgba( 20,24,20,.5 )",t.beginPath();let l=a.width/3*2,p=a.height/3*2,r=Math.min(l,p),s=Math.max(l,p);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 p=C(document.body).getStyleProperty("--color-theme-hsl"),r=2;t.lineWidth=r,t.strokeStyle=`hsla( ${p},1 )`,t.strokeRect(i.x-r,i.y-r,i.w+r*2,i.h+r*2)}}}export(){return O(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,p=i.w/n,r=(i.y-a.y)/h,s=i.h/h,v=Array.from({length:c.length}),S="image/jpeg";for(let g=0;g<c.length;g++){let{size:y,maxSize:d}=c[g];d=d||{S:1024*20,R:1024*100,L:1024*350}[y];let R={S:140,R:600,L:1200}[y],x=document.createElement("canvas");x.width=p,x.height=s;let b=document.createElement("canvas");b.width=R,b.height=R/this.usage.aspect;let D=x.getContext("2d");if(!D)return;let E=b.getContext("2d");if(!E)return;D.clearRect(0,0,x.width,x.height),D.drawImage(this.Picture.elm,l,r,p,s,0,0,p,s),E.fillStyle="black",E.drawImage(x,0,0,x.width,x.height,0,0,b.width,b.height);let $=b.toDataURL(S),A=yield $.toBlob(S);if(!A)return;if(A.size>=d){let ie=d/A.size;if($=b.toDataURL(S,ie*.92),A=yield $.toBlob(S),!A)return}let re=new File([A],this.val_file.name,{type:S});v[g]=re}return v})}}const se={Core:u=>{let{val_file:e,options:c,finishedCallback:t,abortCallback:a}=u,{use:i,develops:n=[]}=c,[h]=z(pe());const l={scale:{default:120,min:50,max:300},rotate:0,grayScale:0,tone:0};let p=2048*2048,r=1024,[s,v]=z("init"),[S,g]=z(""),[y,d]=z(l.scale.default),[R,x]=z(l.rotate),[b,D]=z(l.grayScale),[E,$]=z(l.tone),[A,re]=z(-1),[ie,ce]=z(-1);return ee(()=>{let f="CropperResize";return C(window).addEvent({eventType:"resize",eventID:f,callback:()=>{C.interval.once(()=>{var G;let I=le("#Canvas-"+h)[0];if(!I)return;let P=(G=q.get(h))==null?void 0:G.Instance;if(!P)return;let W=I.position(),U=W.width/W.height,Y=r,F=Y/U;if(Y*F>p){let K=Y*F/p;Y=Math.floor(Y/Math.sqrt(K)),F=Math.floor(F/Math.sqrt(K))}I.width=r,I.height=F;let{width:L,height:Q}=I;P.pst.centerX=L/2,P.pst.centerY=Q/2,P.frameSizing(),P.modifyImage()},250,"CropperResize")}}),()=>{C(window).removeEvent(f)}},[]),ee(()=>{q.set({[h]:{}}),O(void 0,null,function*(){try{let f=le("#Canvas-"+h)[0];if(!f)return;let I=f.position(),P=I.width/I.height,W=r,U=W/P;if(W*U>p){let _=W*U/p;W=Math.floor(W/Math.sqrt(_)),U=Math.floor(U/Math.sqrt(_))}f.width=W,f.height=U;let Y=he(e),F=yield C.ImageLoader(yield Y.toObjectURL());re(F.width),ce(F.height);let L=new ve({set_scale:d,val_file:e,develops:n,use:i,scale:l.scale,componentId:h,canvas:f,picture:{image:F,grayScale:l.grayScale,tone:l.tone,rotate:l.rotate}});q.set({[h]:{Instance:L}});const Q=function(_){if(_.preventDefault(),_.touches&&_.touches.length>1)L.pinchEffect({eventType:"start",event:_}),C(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:M=>{M.preventDefault(),L.pinchEffect({eventType:"move",event:M})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:K});else{L.dragEffect(Z({eventType:"start"},C.getCursor(_)));let{type:M}=_;C(document).addEvent({eventType:M=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:T=>{G("move",T)}}).addEvent({eventType:M=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:T=>{G("end",T),K(T)}})}},G=function(_,M){M.preventDefault(),L.dragEffect(Z({eventType:_},C.getCursor(M)))},K=function(_){_.preventDefault(),C(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};C(f).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:_=>{_.preventDefault();let M=Number(_.wheelDelta*.04),T=L.scale.current+M;T=Math.max(T,L.scale.min),T=Math.min(T,L.scale.max),d(T)},options:{passive:!1}}).addEvent({eventType:"touchstart",eventID:"CropperTouchStart",callback:Q,options:{passive:!1}}).addEvent({eventType:"mousedown",eventID:"CropperMouseDown",callback:Q,options:{passive:!1}}),yield C.pending(()=>{},1e3),v("ok")}catch(f){v("error"),g((f==null?void 0:f.message)||C.Stringify(f)),console.error(f)}})},[e.id]),ee(()=>{var I;let f=(I=q.get(h))==null?void 0:I.Instance;f&&f.updateScale(y)},[y]),ee(()=>{var I;let f=(I=q.get(h))==null?void 0:I.Instance;f&&f.updateFilter({grayScale:b,tone:E,rotate:R})},[b,E,R]),o(N.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:m(J,{className:[V("Wrap"),V("Use_"+i)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[m(X,{position:"absolute",top:"50%",left:"50%",flexCenter:!0,freeCSS:{zIndex:2,transform:"translate( -50%,-50% )",pointerEvents:"none"},children:[s=="init"&&o(te.Theme.XL,{showInitial:!0}),s=="error"&&m(w.Supplement,{fontColor:"nega",children:["\u753B\u50CF\u306E\u8AAD\u307F\u8FBC\u307F\u306B\u5931\u6557\u3057\u307E\u3057\u305F",o(w.Description,{children:S})]})]}),m(X,{flexSizing:0,overflow:"hidden",position:"relative",flexCenter:!0,paddingBottom:6,freeCSS:{zIndex:1,backgroundColor:"#000f0f"},children:[o("canvas",{style:{width:"100%",height:"100%"},width:r,height:r,className:V("Canvas"),id:"Canvas-"+h}),o(w.Supplement,{position:"absolute",bottom:1,left:1,right:1,ssCardBox:"plain",boxShadow:"0.max",padding:1,backgroundColor:"layer.0.opa.few",freeCSS:{backdropFilter:"blur(6px)"},children:m(J,{gap:"1/2",children:[m(B.Left,{gap:"1/2",flexWrap:!0,fontColor:"white",fontSize:"0.xs",fontHeight:1.2,children:[m(w,{children:["[",e.type,"]"]}),o(w,{children:e.name}),m(w,{children:[A,"px x ",ie,"px"]}),m(w,{children:["[",e.size.rank(),"B]"]})]}),m(B.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:$,val_grayScale:b,set_grayScale:D,val_rotate:R,set_rotate:x}),o(me,{}),o(k.Border.S,{onClick:()=>{a()},children:"\u9589\u3058\u308B"}),o(k.Prime.S,{boxShadow:"3.remark",onClick:()=>O(void 0,null,function*(){var P;let f=(P=q.get(h))==null?void 0:P.Instance;if(!f)return;te.fn.mini.active("CropperExportation");let I=yield f.export();setTimeout(()=>{te.fn.mini.stop("CropperExportation"),t(I)},1e3)}),children:m(B.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 m(Ce,{children:[m(B.Center,{gap:"1/6",children:[m(k.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(H,{icon:ge,fontColor:"4.thin"})]}),m(k.Border.S,{flexCenter:!0,gap:"1/4",border:"unset",borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{u.set_rotate((u.val_rotate+90)%360)},children:[o(H,{icon:de,fontColor:"4.thin"}),o(w,{children:"90\xB0"})]})]}),m(k.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperZoomEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:o(N.Body,{children:m(J,{padding:1.5,children:[m(B.Separate,{children:[o(w.Paragraph,{children:m(B.Center,{gap:"1/2",children:[o(H.Search,{fontColor:"5.translucent"}),"Zoom"]})}),o(k.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(H.X,{})})]}),o(X,{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)=>{C.interval.once(()=>{u.set_scale(i+100)},250,"Cropper.UpdateScale")},onLegendRender:i=>"x"+Math.round(100+i)/100})]})})})},children:[o(w.Supplement,{fontSize:"0.xs",fontColor:"4.thin",children:"Zoom"}),m(w,{unitWidth:4,children:[u.val_scale.rate(1,0),"%"]})]}),m(k.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperGrayScaleEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,freeCSS:{minWidth:12*26},content:o(N.Body,{children:m(J,{padding:1.5,children:[m(B.Separate,{children:[o(w.Paragraph,{children:m(B.Center,{gap:"1/2",children:[o(H,{icon:ue,fontColor:"5.translucent"}),"Gray Scale"]})}),o(k.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(H.X,{})})]}),o(X,{borderBottom:!0,opacity:"low"}),o(ae.Slider,{value:u.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:i=>{C.interval.once(()=>{u.set_grayScale(i)},250,"Cropper.GrayScale")},onLegendRender:i=>i+"%"})]})})})},children:[o(w.Supplement,{fontSize:"0.xs",fontColor:"4.thin",children:"GrayScale"}),m(w,{children:[u.val_grayScale.rate(1,0),"%"]})]}),m(k.Border.S,{flexCenter:!0,gap:"1/2",border:"unset",onClick:t=>{let a="CropperToneEdit";j.open({tipsID:a,gravityPoint:3,event:t,closeAtParentBlur:!1,freeCSS:{minWidth:12*26,maxWidth:12*24},content:()=>{let i=[];for(let n=1;n<=10;n++)i.push({value:n,label:m(B.Left,{gap:"1/3",children:[o(X,{ssSphere:1,className:[V("ToneBall"),V("ToneBall_"+n)].join(" ")}),o(X,{textAlign:"left",flexSizing:0,children:c(n)})]})});return o(N.Body,{children:m(J,{padding:1.5,children:[m(B.Separate,{children:[o(w.Paragraph,{children:m(B.Center,{gap:"1/2",children:[o(H,{icon:fe,fontColor:"5.translucent"}),"Tone"]})}),o(k.Sub,{color:"cloud",ssSphere:2.5,onClick:()=>{j.close(a)},children:o(H.X,{})})]}),o(X,{borderBottom:!0,opacity:"low"}),o(ae.Radio.Normal,{value:u.val_tone,gap:"1/2",cellStyles:{fontColor:"3.blur"},options:[{value:0,label:o(X,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...i],onUpdateValidValue:n=>{u.set_tone(n)}})]})})}})},children:[o(w.Supplement,{fontSize:"0.xs",fontColor:"4.thin",children:"Tone"}),o(X,{boxShadow:"2.remark",ssSphere:1,className:[V("ToneBall"),V("ToneBall_"+u.val_tone)].join(" ")}),c(u.val_tone)]})]})}},oe={openDialogNEdit:u=>{ae.Filer.fn.openDialog({accept:"image",multiple:!1,onChange:e=>{oe.openEditor(Z({imageFile:e[0]},u))}})},openEditor:u=>O(void 0,null,function*(){let e="CropperImage";N.open("middleCenter",{sheetID:e,size:"MAX",padding:0,margin:0,freeCSS:{maxWidth:"100%"},content:o(se.Core,{val_file:u.imageFile,options:u,finishedCallback:c=>{N.close(e),u.onProcessFinished(c)},abortCallback:()=>{N.close(e)}}),closeAtEscapeKeyDown:!1})})};export{oe as Cropper,oe as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as m,c as g,d as Q,e as Y}from"../../chunk-C5N2D3ZX.js";import{Fragment as H,jsx as n,jsxs as A}from"react/jsx-runtime";import{useState as b,useEffect as B,useRef as ie}from"react";import c,{UUID as D}from"jmini";import{ExtractStyles as re}from"../../@utils";import{Box as L,Span as se,FAI as N,Column as Z}from"../../atoms";import{Literal as U,Row as M}from"../../mols";import{Button as ee}from"../Button";import{Loader as ue}from"../Loader";import{Sheet as ce}from"../Sheet";import{OptionalInputWrapper as pe,BoxWrapper as de,CoreEffects as W,DefaultBoxishStyles as Se}from"./core";import{InputAutocompleteClasses as z}from"../../@styles/componentClasses";import{InputLabel as fe}from"./Label";import{RightIcon as te}from".";function me(e){let{value:t,states:r}=e,{required:p,options:o,min:a,max:l}=r;a=a||0,l=l||65535;let d=[],s=t.filter(u=>u!==null).length;return p&&(s||d.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),s<a&&d.push({type:"invalid",label:a+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),s>l&&d.push({type:"invalid",label:l+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!d.filter(({type:u})=>u=="invalid").length,notice:d}}const C={InitOptions:e=>{let t=[];return e.forEach(r=>{if(!r)return;let{type:p,label:o,value:a,searchValue:l}=r,d=l||c.is.string(o)&&o||""||c.is.string(a)&&a||c.Stringify(a||"")||"";c.is.nullish(o)&&(o=String(a)),t.push(g(m({id:D(8)},r),{searchValue:d,type:p||"selector",label:o,value:a}))}),t},FilterSelectableOptions:(e,t,r)=>{let p=e;return r||(p=e.filter(o=>(o==null?void 0:o.type)!="label")),c.scope(()=>{if(!t)return;let o=t.toLower().replace(/ /g,"");p=p.filter(a=>(a.searchValue||"").toLower().replace(/ /g,"").includes(o))}),p},Shallow:e=>{let{rootStates:t,val_status:r}=e,p=re(t);return n(L,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:n(U.Description,g(m({className:t.className},p),{position:"absolute",width:1,freeCSS:g(m({},p.freeCSS),{color:"orange"}),"data-id":"shallow_"+r.componentId,children:n(L,{"data-input-value-shallow":r.componentId,children:"A"})}))})},Button:e=>{let{rootStates:t,val_keyword:r,set_keyword:p,val_optionFocused:o,set_optionFocused:a,val_preventOpenSelector:l,set_preventOpenSelector:d,val_openSelector:s,set_openSelector:u,val_status:i,set_status:S,val_activeInput:f,set_activeInput:y}=e,j=t,{tone:O,required:w,form:h,className:k,multiSelect:I,enableFormSubmit:x,checkValidationAtFirst:F,onValidate:E,onValidateDelay:J,onUpdateValue:K,onUpdateValidValue:q,onUserAction:X,value:$="",options:R,leftIndicator:P,rightIndicator:T,leftIcon:ve,rightIcon:ye,componentId:_e,status_id:ge,wrapStyles:he,emptySelect:Ie,SearchInput:be,SearchInputPlaceholder:Ce,SelectedComponent:De,SelectorComponent:Oe,SelectorStyles:we,SelectorPosition:ke,DynamicOptionsOnSearch:xe,DynamicOptionsOnSearchDelay:Re}=j,v=Q(j,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","SearchInput","SearchInputPlaceholder","SelectedComponent","SelectorComponent","SelectorStyles","SelectorPosition","DynamicOptionsOnSearch","DynamicOptionsOnSearchDelay"]);return B(()=>{var V;if(t.disabled||!s||c.is.exist(o))return;let _=C.FilterSelectableOptions(e.val_options,r,!1);a(((V=_[0])==null?void 0:V.id)||"")},[r]),B(()=>{if(i.eventType!="init"&&i.eventType!="override"){if(t.max==i.dataValue.length){u(!1),d(!0),p("");return}c("#SearchInput_"+t.componentId).focus()}},[i.dataValue]),B(()=>{let _="autocomplete-click-"+t.componentId;if(!s){c(document).removeEvent([_]);return}c('[data-input-origin="'+t.componentId+'"]')&&(c("#SearchInput_"+t.componentId).focus(),c(document).addEvent({eventID:_,eventType:"mousedown",callback:ae=>{let G=c(ae.target),ne=!!c(G).parent("."+z("Core")).length,le=!!c(G).parent("."+z("Selector")).length;ne||le||(u(!1),y(!1))},options:{passive:!1}}))},[s]),A(H,{children:[n(L,g(m({tabIndex:0},v),{"data-disabled":t.disabled,"data-show-validation":W.isShowValidation(i,!!F),"data-component-id":i.componentId,"data-input-origin":i.componentId,"data-focus":!!s||!!f,className:[k,z("Core")].join(" "),onFocus:_=>{if(v!=null&&v.onFocus&&(v==null||v.onFocus(_)),!t.disabled){if(l)return d(!1);u(!0),y(!0),_.preventDefault()}},onCompositionStart:_=>{v!=null&&v.onCompositionStart&&(v==null||v.onCompositionStart(_))},onCompositionEnd:_=>{v!=null&&v.onCompositionEnd&&(v==null||v.onCompositionEnd(_))},onClick:_=>{v!=null&&v.onClick&&(v==null||v.onClick(_)),!t.disabled&&(u(!0),y(!0))},onKeyDown:_=>{let{key:V}=_;x&&W.SubmitForm(_,h),!s&&(V==" "||V=="ArrowDown"||V=="ArrowUp"||V=="Enter")&&(u(!0),y(!0))},children:A(M.Left,{gap:0,children:[n(se,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),A(M.Left,{flexWrap:!0,flexSizing:0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[n(C.Selected,m({},e)),n(C.SearchInput,m({},e))]})]})})),s&&n(C.Selector,m({},e))]})},SearchInput:e=>{let{rootStates:t,val_status:r,set_status:p}=e;return t.disabled||!e.val_openSelector&&!e.val_activeInput?null:n(L,{htmlTag:"input",id:"SearchInput_"+t.componentId,placeholder:t.SearchInputPlaceholder||"\u691C\u7D22...",opacity:e.val_openSelector?"max":"middle",transition:"middle",flexSizing:0,fontSize:"inherit",border:"unset",backgroundColor:"trans",value:e.val_keyword,freeCSS:{outline:"none"},onFocus:o=>{p(a=>g(m({},a),{eventID:D(8),isFocusing:!0}))},onBlur:o=>{e.set_activeInput(!1),p(a=>g(m({},a),{eventID:D(8),isFocusing:!1}))},onCompositionStart:o=>{p(a=>g(m({},a),{eventID:D(8),isComposing:!0}))},onCompositionEnd:o=>{p(a=>g(m({},a),{eventID:D(8),isComposing:!1}))},onKeyDown:o=>{let{key:a,metaKey:l,ctrlKey:d}=o,s=l||d;a=="Tab"?(e.set_openSelector(!1),e.set_activeInput(!1),e.set_preventOpenSelector(!1)):a==" "?c.scope(()=>{e.val_openSelector||e.val_keyword||(o.preventDefault(),e.set_openSelector(!0))}):a=="Backspace"?c.scope(()=>{if(e.val_keyword)return;let u=[...e.val_status.dataValue];u.pop(),e.set_status(i=>g(m({},i),{dataValue:u,eventType:"update",eventID:D(8),isInspected:!1}))}):a=="Enter"&&c.scope(()=>{if(r.isComposing||(o==null?void 0:o.keyCode)===229)return;if(!e.val_openSelector)return e.set_openSelector(!0);if(!e.val_optionFocused)return;let u=e.val_options.find(S=>(S==null?void 0:S.id)==e.val_optionFocused);if(!u)return;let{value:i}=u;e.set_status(S=>{let f=[...S.dataValue];return c.scope(()=>{if(i===null)return f=[];S.dataValue.includes(i)?f=f.filter(O=>O!==i):t.multiSelect?f.push(i):f=[i]}),g(m({},S),{dataValue:f,eventType:"update",eventID:D(8),isInspected:!1})}),e.set_optionsModified(!0),e.set_keyword("")}),c.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(a))return;if(o.preventDefault(),!e.val_openSelector)return e.set_openSelector(!0);let u=a=="ArrowDown"?1:-1,i=C.FilterSelectableOptions(e.val_options,e.val_keyword),S=i.length-1,f=null;c.scope(()=>{var O,w,h,k,I,x,F;let y=i.findIndex(E=>(E==null?void 0:E.id)==e.val_optionFocused);if(y==-1){f=(O=i[0])==null?void 0:O.id;return}if(u==1){if(f=(w=i[0])==null?void 0:w.id,s){f=(h=i[S])==null?void 0:h.id;return}if(y==-1||y==S)return;f=(k=i[y+1])==null?void 0:k.id}else{if(f=(I=i[S])==null?void 0:I.id,s){f=(x=i[0])==null?void 0:x.id;return}if(y==-1||y==0)return;f=(F=i[y-1])==null?void 0:F.id}}),e.set_optionFocused(f)}),t.enableFormSubmit&&W.SubmitForm(o,e.rootStates.form)},onChange:o=>{let l=o.target.value;e.set_openSelector(!0),e.set_optionFocused(""),e.set_keyword(l)}},"searchInput")},Selector:e=>{var d;let[t,r]=b("idle"),[p,o]=b("idle");B(()=>{if(!e.rootStates.DynamicOptionsOnSearch||!e.val_openSelector)return;if(e.val_optionsModified)return e.set_optionsModified(!1);if(e.val_status.isComposing)return;if(t=="idle")return r("ok");o("fetch");let s="autocomplete-search-"+e.rootStates.componentId;e.set_optionFocused(""),c.interval.once(()=>Y(void 0,null,function*(){var S;let u=yield e.rootStates.DynamicOptionsOnSearch(e.val_keyword);o("idle");let i=C.InitOptions(u||[]);e.set_options(i),e.set_optionFocused(((S=i[0])==null?void 0:S.id)||"")}),e.rootStates.DynamicOptionsOnSearchDelay||500,s)},[e.val_keyword,e.val_status.isComposing]),B(()=>{let s=c(`[data-selector-id="${e.val_status.componentId}"]`)[0];if(!s)return;let u=c(`[data-autocomplete-input-value="${e.val_optionFocused}"]`)[0];u&&(s.scrollTop=u.offsetTop-24)},[e.val_optionFocused]);let a=C.FilterSelectableOptions(e.val_options,e.rootStates.DynamicOptionsOnSearch?"":e.val_keyword,!0),l={};switch(e.rootStates.SelectorPosition){case 1:l.bottom="100%",l.left=0,l.paddingBottom="1/3";break;case 2:l.bottom="100%",l.right=0,l.paddingBottom="1/3";break;case 3:l.top="100%",l.left=0,l.paddingTop="1/3";break;case 4:l.top="100%",l.right=0,l.paddingTop="1/3";break;default:break}return n(L,g(m({position:"absolute"},l),{freeCSS:m({minWidth:"75%",zIndex:1e3},l.freeCSS),children:n(ce.Body,g(m({className:z("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,boxShadow:"1.normal",overflow:"auto","data-selector-id":e.val_status.componentId},e.rootStates.SelectorStyles),{freeCSS:m({maxHeight:12*24},(d=e.rootStates.SelectorStyles)==null?void 0:d.freeCSS),children:A(Z,{gap:"1/12",padding:[1,0],children:[p=="fetch"&&n(M.Center,{padding:"1/2",children:n(ue.Theme.R,{showInitial:!0})}),p!="fetch"&&A(H,{children:[!a.length&&n(U.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),a.map((s,u)=>{if(!s)return null;let{type:i,value:S}=s,f=e.val_optionFocused==s.id,y=e.val_status.dataValue.includes(S),O=e.rootStates.SelectorComponent;return n(Z,{"data-autocomplete-input-value":s.id,children:n(O,{option:s,isFocused:f,isSelected:y,addCallback:()=>{e.set_status(w=>{let h=[...w.dataValue];return c.scope(()=>{if(S===null)return h=[];w.dataValue.includes(S)?h=h.filter(I=>I!==S):e.rootStates.multiSelect?h.push(S):h=[S]}),g(m({},w),{dataValue:h,eventType:"update",eventID:D(8),isInspected:!1})})}})},s.id)})]})]})}))}))},Selected:e=>{let{rootStates:t,val_status:r,set_status:p,val_optionsDict:o}=e,a=[];return r.dataValue.forEach(l=>{let d=o[c.Stringify(l)];if(!d)return;let s=t.SelectedComponent,u=d.label;(d==null?void 0:d.value)===null&&(u=""),a.push(n(L,{className:z("SelectedCell"),children:n(s,{value:d==null?void 0:d.value,label:u,removeCallback:i=>{if(i.stopPropagation(),i.preventDefault(),t.disabled)return;let S=[...r.dataValue];S=S.filter(f=>f!==l),p(f=>g(m({},f),{dataValue:S,eventType:"update",eventID:D(8),isInspected:!1}))}})},c.Stringify(d==null?void 0:d.value)||D(8)))}),n(H,{children:a})},Core:e=>{var q,X,$;let{value:t}=e,[r,p]=b(!1),[o,a]=b(!1),[l,d]=b(!1),[s,u]=b(!1),[i,S]=b(""),[f,y]=b(e.options),[O,w]=b(((q=e.options.find(R=>{var P;return(R==null?void 0:R.value)===((P=e.value)==null?void 0:P[0])}))==null?void 0:q.id)||((X=e.options[0])==null?void 0:X.id)||""),[h,k]=b({}),[I,x]=b(W.DefaultStatus(e.componentId,t)),F=ie(!1);B(()=>{o||(F.current?y(e.options):F.current=!0)},[c.Stringify(($=e.options)==null?void 0:$.map(R=>R.value))]),B(()=>{if(!f.length)return;let R=[...f],P=m({},h);R.forEach(T=>{(T==null?void 0:T.type)!="label"&&(P[c.Stringify(T==null?void 0:T.value)]=T)}),k(P)},[f]);let E={rootStates:e,val_options:f,set_options:y,val_optionFocused:O,set_optionFocused:w,val_optionsDict:h,set_optionsDict:k,val_optionsModified:o,set_optionsModified:a,val_preventOpenSelector:r,set_preventOpenSelector:p,val_openSelector:l,set_openSelector:d,val_activeInput:s,set_activeInput:u,val_keyword:i,set_keyword:S,val_status:I,set_status:x},J=!!e.multiSelect;W.CommonEffects({type:J?"autocomplete.multi":"autocomplete.single",states:e,val_status:I,set_status:x,SystemValidation:me});let K=I.dataValue.length&&I.dataValue[0]!==null;return K=K||l||s,A(de,{val_status:I,set_status:x,states:e,children:[n(fe,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:K}),n(C.Shallow,m({},E)),n(C.Button,m({},E))]})}},oe=e=>{let t=m({},e);return t=g(m({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:r,isSelected:p,isFocused:o,addCallback:a})=>r?(r==null?void 0:r.type)=="label"?n(H,{children:r.label}):n(ee.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:o,isActiveStyles:{backgroundColor:"cloud"},onClick:a,children:A(M.Left,{gap:"1/2",children:[p&&n(N.Check,{fontColor:"theme"}),n(U.Supplement,{transition:"short",children:r.label})]})}):null,SelectedComponent:({value:r,label:p,removeCallback:o})=>A(M.Left,{ssCardBox:"cloud",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[n(L,{padding:[0,"1/4"],children:p}),n(ee.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,isRounded:!0,padding:"1/4",onClick:o,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:n(N.X,{})})]}),SelectorPosition:3},t),{freeCSS:m({cursor:"pointer"},t.freeCSS)}),t.multiSelect||(t.min=0,t.max=1),t.options=t.options||[],t.emptySelect&&(t.options=[{value:null,label:n(U.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...t.options]),t.value=c.flatArray(t.value),t.options=C.InitOptions(t.options),c.is.nullish(t.rightIcon)&&(t.rightIcon=n(te,{children:n(N.Search,{})}),t.disabled&&(t.rightIcon=n(te,{fontColor:"5.translucent",children:n(N.Ban,{})}))),t.rightIcon&&(t=m({paddingRight:3},t)),t.leftIcon&&(t=m({paddingLeft:3},t)),n(pe,{componentId:t.componentId,children:C.Core,states:Se(t)})};export{oe as Autocomplete,oe as default};
|
|
1
|
+
import{b as m,c as g,d as Q,e as Y}from"../../chunk-C5N2D3ZX.js";import{Fragment as H,jsx as l,jsxs as A}from"react/jsx-runtime";import{useState as b,useEffect as B,useRef as ie}from"react";import c,{UUID as w}from"jmini";import{ExtractStyles as re}from"../../@utils";import{Box as L,Span as se,FAI as N,Column as Z}from"../../atoms";import{Literal as U,Row as M}from"../../mols";import{Button as ee}from"../Button";import{Loader as ue}from"../Loader";import{Sheet as ce}from"../Sheet";import{OptionalInputWrapper as pe,BoxWrapper as de,CoreEffects as W,DefaultBoxishStyles as Se}from"./core";import{InputAutocompleteClasses as z}from"../../@styles/componentClasses";import{InputLabel as fe}from"./Label";import{RightIcon as te}from".";function me(e){let{value:t,states:r}=e,{required:p,options:o,min:n,max:a}=r;n=n||0,a=a||65535;let d=[],s=t.filter(u=>u!==null).length;return p&&(s||d.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),s<n&&d.push({type:"invalid",label:n+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),s>a&&d.push({type:"invalid",label:a+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!d.filter(({type:u})=>u=="invalid").length,notice:d}}const C={InitOptions:e=>{let t=[];return e.forEach(r=>{if(!r)return;let{type:p,label:o,value:n,searchValue:a}=r,d=a||c.is.string(o)&&o||""||c.is.string(n)&&n||c.Stringify(n||"")||"";c.is.nullish(o)&&(o=String(n)),t.push(g(m({id:w(8)},r),{searchValue:d,type:p||"selector",label:o,value:n}))}),t},FilterSelectableOptions:(e,t,r)=>{let p=e;return r||(p=e.filter(o=>(o==null?void 0:o.type)!="label")),c.scope(()=>{if(!t)return;let o=t.toLower().replace(/ /g,"");p=p.filter(n=>(n.searchValue||"").toLower().replace(/ /g,"").includes(o))}),p},Shallow:e=>{let{rootStates:t,val_status:r}=e,p=re(t);return l(L,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:l(U.Description,g(m({className:t.className},p),{position:"absolute",width:1,freeCSS:g(m({},p.freeCSS),{color:"orange"}),"data-id":"shallow_"+r.componentId,children:l(L,{"data-input-value-shallow":r.componentId,children:"A"})}))})},Button:e=>{let{rootStates:t,val_keyword:r,set_keyword:p,val_optionFocused:o,set_optionFocused:n,val_preventOpenSelector:a,set_preventOpenSelector:d,val_openSelector:s,set_openSelector:u,val_status:i,set_status:S,val_activeInput:f,set_activeInput:y}=e,j=t,{tone:D,required:O,form:h,className:k,multiSelect:I,enableFormSubmit:x,checkValidationAtFirst:F,onValidate:E,onValidateDelay:J,onUpdateValue:K,onUpdateValidValue:q,onUserAction:X,value:$="",options:R,leftIndicator:P,rightIndicator:T,leftIcon:ve,rightIcon:ye,componentId:_e,status_id:ge,wrapStyles:he,emptySelect:Ie,SearchInput:be,SearchInputPlaceholder:Ce,SelectedComponent:we,SelectorComponent:De,SelectorStyles:Oe,SelectorPosition:ke,DynamicOptionsOnSearch:xe,DynamicOptionsOnSearchDelay:Re}=j,v=Q(j,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","SearchInput","SearchInputPlaceholder","SelectedComponent","SelectorComponent","SelectorStyles","SelectorPosition","DynamicOptionsOnSearch","DynamicOptionsOnSearchDelay"]);return B(()=>{var V;if(t.disabled||!s||c.is.exist(o))return;let _=C.FilterSelectableOptions(e.val_options,r,!1);n(((V=_[0])==null?void 0:V.id)||"")},[r]),B(()=>{if(i.eventType!="init"&&i.eventType!="override"){if(t.max==i.rawValue.length){u(!1),d(!0),p("");return}c("#SearchInput_"+t.componentId).focus()}},[i.rawValue]),B(()=>{let _="autocomplete-click-"+t.componentId;if(!s){c(document).removeEvent([_]);return}c('[data-input-origin="'+t.componentId+'"]')&&(c("#SearchInput_"+t.componentId).focus(),c(document).addEvent({eventID:_,eventType:"mousedown",callback:ne=>{let G=c(ne.target),le=!!c(G).parent("."+z("Core")).length,ae=!!c(G).parent("."+z("Selector")).length;le||ae||(u(!1),y(!1))},options:{passive:!1}}))},[s]),A(H,{children:[l(L,g(m({tabIndex:0},v),{"data-disabled":t.disabled,"data-show-validation":W.isShowValidation(i,!!F),"data-component-id":i.componentId,"data-input-origin":i.componentId,"data-focus":!!s||!!f,className:[k,z("Core")].join(" "),onFocus:_=>{if(v!=null&&v.onFocus&&(v==null||v.onFocus(_)),!t.disabled){if(a)return d(!1);u(!0),y(!0),_.preventDefault()}},onCompositionStart:_=>{v!=null&&v.onCompositionStart&&(v==null||v.onCompositionStart(_))},onCompositionEnd:_=>{v!=null&&v.onCompositionEnd&&(v==null||v.onCompositionEnd(_))},onClick:_=>{v!=null&&v.onClick&&(v==null||v.onClick(_)),!t.disabled&&(u(!0),y(!0))},onKeyDown:_=>{let{key:V}=_;x&&W.SubmitForm(_,h),!s&&(V==" "||V=="ArrowDown"||V=="ArrowUp"||V=="Enter")&&(u(!0),y(!0))},children:A(M.Left,{gap:0,children:[l(se,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),A(M.Left,{flexWrap:!0,flexSizing:0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(C.Selected,m({},e)),l(C.SearchInput,m({},e))]})]})})),s&&l(C.Selector,m({},e))]})},SearchInput:e=>{let{rootStates:t,val_status:r,set_status:p}=e;return t.disabled||!e.val_openSelector&&!e.val_activeInput?null:l(L,{htmlTag:"input",id:"SearchInput_"+t.componentId,placeholder:t.SearchInputPlaceholder||"\u691C\u7D22...",opacity:e.val_openSelector?"max":"middle",transition:"middle",flexSizing:0,fontSize:"inherit",border:"unset",backgroundColor:"trans",value:e.val_keyword,freeCSS:{outline:"none"},onFocus:o=>{p(n=>g(m({},n),{eventID:w(8),isFocusing:!0}))},onBlur:o=>{e.set_activeInput(!1),p(n=>g(m({},n),{eventID:w(8),isFocusing:!1}))},onCompositionStart:o=>{p(n=>g(m({},n),{eventID:w(8),isComposing:!0}))},onCompositionEnd:o=>{p(n=>g(m({},n),{eventID:w(8),isComposing:!1}))},onKeyDown:o=>{let{key:n,metaKey:a,ctrlKey:d}=o,s=a||d;n=="Tab"?(e.set_openSelector(!1),e.set_activeInput(!1),e.set_preventOpenSelector(!1)):n==" "?c.scope(()=>{e.val_openSelector||e.val_keyword||(o.preventDefault(),e.set_openSelector(!0))}):n=="Backspace"?c.scope(()=>{if(e.val_keyword)return;let u=[...e.val_status.rawValue];u.pop(),e.set_status(i=>g(m({},i),{rawValue:u,eventType:"update",eventID:w(8),isInspected:!1}))}):n=="Enter"&&c.scope(()=>{if(r.isComposing||(o==null?void 0:o.keyCode)===229)return;if(!e.val_openSelector)return e.set_openSelector(!0);if(!e.val_optionFocused)return;let u=e.val_options.find(S=>(S==null?void 0:S.id)==e.val_optionFocused);if(!u)return;let{value:i}=u;e.set_status(S=>{let f=[...S.rawValue];return c.scope(()=>{if(i===null)return f=[];S.rawValue.includes(i)?f=f.filter(D=>D!==i):t.multiSelect?f.push(i):f=[i]}),g(m({},S),{rawValue:f,eventType:"update",eventID:w(8),isInspected:!1})}),e.set_optionsModified(!0),e.set_keyword("")}),c.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(n))return;if(o.preventDefault(),!e.val_openSelector)return e.set_openSelector(!0);let u=n=="ArrowDown"?1:-1,i=C.FilterSelectableOptions(e.val_options,e.val_keyword),S=i.length-1,f=null;c.scope(()=>{var D,O,h,k,I,x,F;let y=i.findIndex(E=>(E==null?void 0:E.id)==e.val_optionFocused);if(y==-1){f=(D=i[0])==null?void 0:D.id;return}if(u==1){if(f=(O=i[0])==null?void 0:O.id,s){f=(h=i[S])==null?void 0:h.id;return}if(y==-1||y==S)return;f=(k=i[y+1])==null?void 0:k.id}else{if(f=(I=i[S])==null?void 0:I.id,s){f=(x=i[0])==null?void 0:x.id;return}if(y==-1||y==0)return;f=(F=i[y-1])==null?void 0:F.id}}),e.set_optionFocused(f)}),t.enableFormSubmit&&W.SubmitForm(o,e.rootStates.form)},onChange:o=>{let a=o.target.value;e.set_openSelector(!0),e.set_optionFocused(""),e.set_keyword(a)}},"searchInput")},Selector:e=>{var d;let[t,r]=b("idle"),[p,o]=b("idle");B(()=>{if(!e.rootStates.DynamicOptionsOnSearch||!e.val_openSelector)return;if(e.val_optionsModified)return e.set_optionsModified(!1);if(e.val_status.isComposing)return;if(t=="idle")return r("ok");o("fetch");let s="autocomplete-search-"+e.rootStates.componentId;e.set_optionFocused(""),c.interval.once(()=>Y(void 0,null,function*(){var S;let u=yield e.rootStates.DynamicOptionsOnSearch(e.val_keyword);o("idle");let i=C.InitOptions(u||[]);e.set_options(i),e.set_optionFocused(((S=i[0])==null?void 0:S.id)||"")}),e.rootStates.DynamicOptionsOnSearchDelay||500,s)},[e.val_keyword,e.val_status.isComposing]),B(()=>{let s=c(`[data-selector-id="${e.val_status.componentId}"]`)[0];if(!s)return;let u=c(`[data-autocomplete-input-value="${e.val_optionFocused}"]`)[0];u&&(s.scrollTop=u.offsetTop-24)},[e.val_optionFocused]);let n=C.FilterSelectableOptions(e.val_options,e.rootStates.DynamicOptionsOnSearch?"":e.val_keyword,!0),a={};switch(e.rootStates.SelectorPosition){case 1:a.bottom="100%",a.left=0,a.paddingBottom="1/3";break;case 2:a.bottom="100%",a.right=0,a.paddingBottom="1/3";break;case 3:a.top="100%",a.left=0,a.paddingTop="1/3";break;case 4:a.top="100%",a.right=0,a.paddingTop="1/3";break;default:break}return l(L,g(m({position:"absolute"},a),{freeCSS:m({minWidth:"75%",zIndex:1e3},a.freeCSS),children:l(ce.Body,g(m({className:z("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,boxShadow:"1.normal",overflow:"auto","data-selector-id":e.val_status.componentId},e.rootStates.SelectorStyles),{freeCSS:m({maxHeight:12*24},(d=e.rootStates.SelectorStyles)==null?void 0:d.freeCSS),children:A(Z,{gap:"1/12",padding:[1,0],children:[p=="fetch"&&l(M.Center,{padding:"1/2",children:l(ue.Theme.R,{showInitial:!0})}),p!="fetch"&&A(H,{children:[!n.length&&l(U.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),n.map((s,u)=>{if(!s)return null;let{type:i,value:S}=s,f=e.val_optionFocused==s.id,y=e.val_status.rawValue.includes(S),D=e.rootStates.SelectorComponent;return l(Z,{"data-autocomplete-input-value":s.id,children:l(D,{option:s,isFocused:f,isSelected:y,addCallback:()=>{e.set_status(O=>{let h=[...O.rawValue];return c.scope(()=>{if(S===null)return h=[];O.rawValue.includes(S)?h=h.filter(I=>I!==S):e.rootStates.multiSelect?h.push(S):h=[S]}),g(m({},O),{rawValue:h,eventType:"update",eventID:w(8),isInspected:!1})})}})},s.id)})]})]})}))}))},Selected:e=>{let{rootStates:t,val_status:r,set_status:p,val_optionsDict:o}=e,n=[];return r.rawValue.forEach(a=>{let d=o[c.Stringify(a)];if(!d)return;let s=t.SelectedComponent,u=d.label;(d==null?void 0:d.value)===null&&(u=""),n.push(l(L,{className:z("SelectedCell"),children:l(s,{value:d==null?void 0:d.value,label:u,removeCallback:i=>{if(i.stopPropagation(),i.preventDefault(),t.disabled)return;let S=[...r.rawValue];S=S.filter(f=>f!==a),p(f=>g(m({},f),{rawValue:S,eventType:"update",eventID:w(8),isInspected:!1}))}})},c.Stringify(d==null?void 0:d.value)||w(8)))}),l(H,{children:n})},Core:e=>{var q,X,$;let{value:t}=e,[r,p]=b(!1),[o,n]=b(!1),[a,d]=b(!1),[s,u]=b(!1),[i,S]=b(""),[f,y]=b(e.options),[D,O]=b(((q=e.options.find(R=>{var P;return(R==null?void 0:R.value)===((P=e.value)==null?void 0:P[0])}))==null?void 0:q.id)||((X=e.options[0])==null?void 0:X.id)||""),[h,k]=b({}),[I,x]=b(W.DefaultStatus(e.componentId,t)),F=ie(!1);B(()=>{o||(F.current?y(e.options):F.current=!0)},[c.Stringify(($=e.options)==null?void 0:$.map(R=>R.value))]),B(()=>{if(!f.length)return;let R=[...f],P=m({},h);R.forEach(T=>{(T==null?void 0:T.type)!="label"&&(P[c.Stringify(T==null?void 0:T.value)]=T)}),k(P)},[f]);let E={rootStates:e,val_options:f,set_options:y,val_optionFocused:D,set_optionFocused:O,val_optionsDict:h,set_optionsDict:k,val_optionsModified:o,set_optionsModified:n,val_preventOpenSelector:r,set_preventOpenSelector:p,val_openSelector:a,set_openSelector:d,val_activeInput:s,set_activeInput:u,val_keyword:i,set_keyword:S,val_status:I,set_status:x},J=!!e.multiSelect;W.CommonEffects({type:J?"autocomplete.multi":"autocomplete.single",states:e,val_status:I,set_status:x,SystemValidation:me});let K=I.rawValue.length&&I.rawValue[0]!==null;return K=K||a||s,A(de,{val_status:I,set_status:x,states:e,children:[l(fe,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:K}),l(C.Shallow,m({},E)),l(C.Button,m({},E))]})}},oe=e=>{let t=m({},e);return t=g(m({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:r,isSelected:p,isFocused:o,addCallback:n})=>r?(r==null?void 0:r.type)=="label"?l(H,{children:r.label}):l(ee.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:o,isActiveStyles:{backgroundColor:"cloud"},onClick:n,children:A(M.Left,{gap:"1/2",children:[p&&l(N.Check,{fontColor:"theme"}),l(U.Supplement,{transition:"short",children:r.label})]})}):null,SelectedComponent:({value:r,label:p,removeCallback:o})=>A(M.Left,{ssCardBox:"cloud",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[l(L,{padding:[0,"1/4"],children:p}),l(ee.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,isRounded:!0,padding:"1/4",onClick:o,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:l(N.X,{})})]}),SelectorPosition:3},t),{freeCSS:m({cursor:"pointer"},t.freeCSS)}),t.multiSelect||(t.min=0,t.max=1),t.options=t.options||[],t.emptySelect&&(t.options=[{value:null,label:l(U.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...t.options]),t.value=c.flatArray(t.value),t.options=C.InitOptions(t.options),c.is.nullish(t.rightIcon)&&(t.rightIcon=l(te,{children:l(N.Search,{})}),t.disabled&&(t.rightIcon=l(te,{fontColor:"5.translucent",children:l(N.Ban,{})}))),t.rightIcon&&(t=m({paddingRight:3},t)),t.leftIcon&&(t=m({paddingLeft:3},t)),l(pe,{componentId:t.componentId,children:C.Core,states:Se(t)})};export{oe as Autocomplete,oe as default};
|
package/dist/fn/Input/Color.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as n,c as a,d as v}from"../../chunk-C5N2D3ZX.js";import{jsx as
|
|
1
|
+
import{b as n,c as a,d as v}from"../../chunk-C5N2D3ZX.js";import{jsx as d}from"react/jsx-runtime";import{UUID as m}from"jmini";import{useState as D}from"react";import F from"../../atoms/Box";import{OptionalInputWrapper as T,BoxWrapper as h,CoreEffects as c,DefaultBoxishStyles as x}from"./core";import{InputSwitchClasses as B}from"../../@styles/componentClasses";function w(e){let{value:s,states:I}=e,{required:p}=I,l=[];return p&&!s&&l.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!l.filter(({type:f})=>f=="invalid").length,notice:l}}const U=e=>{let g=e,{componentId:s,required:I,form:p,enableFormSubmit:l,checkValidationAtFirst:f,onChange:C,onKeyDown:y,onValidate:E,onValidateDelay:R,onUpdateValue:W,onUpdateValidValue:_,onUserAction:k,value:S=""}=g,t=v(g,["componentId","required","form","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value"]),[i,r]=D(c.DefaultStatus(e.componentId||"",S));return c.CommonEffects({type:"color",states:e,val_status:i,set_status:r,SystemValidation:w}),d(h,{val_status:i,set_status:r,states:e,children:d(F,n({htmlTag:"input",type:"color","data-component-id":i.componentId,value:i.rawValue,className:B("Input"),onKeyDown:o=>{y&&y(o),l&&c.SubmitForm(o,p)},onChange:o=>{let{value:u}=o.target;r(b=>a(n({},b),{rawValue:u,eventType:"update",eventID:m(12),isInspected:!1,isValidated:!1,notice:[]})),C&&C(o)},onFocus:o=>{t!=null&&t.onFocus&&(t==null||t.onFocus(o)),r(u=>a(n({},u),{eventID:m(12),isFocusing:!0}))},onBlur:o=>{t!=null&&t.onBlur&&(t==null||t.onBlur(o)),r(u=>a(n({},u),{eventID:m(12),isFocusing:!1}))}},t))})},V=e=>{let s=a(n(a(n({},x(e)),{backgroundColor:"cloud",unitHeight:3}),e),{freeCSS:n({minWidth:108},e.freeCSS)});return d(T,{componentId:e.componentId,children:U,states:s})};export{V as Color,V as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as o,c as
|
|
1
|
+
import{b as o,c as r,d as y}from"../../chunk-C5N2D3ZX.js";import{jsx as d}from"react/jsx-runtime";import{UUID as x}from"jmini";import{useState as R}from"react";import{OptionalInputWrapper as w,BoxWrapper as D,CoreEffects as l,DefaultBoxishStyles as g}from"./core";import{Box as B}from"../../atoms";function F(t){let{value:e,states:c}=t,{required:u}=c,n=[];return u&&!e&&n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!n.filter(({type:s})=>s=="invalid").length,notice:n}}const H=t=>{let I=t,{componentId:e,tone:c,required:u,form:n,value:s,enableFormSubmit:h,checkValidationAtFirst:S,onInput:m,onKeyDown:f,onValidate:L,onValidateDelay:M,onUpdateValue:U,onUpdateValidValue:_,onUserAction:A,children:T="",leftIndicator:W,rightIndicator:k,leftIcon:q,rightIcon:K,freeCSS:G,wrapStyles:N}=I,C=y(I,["componentId","tone","required","form","value","enableFormSubmit","checkValidationAtFirst","onInput","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","children","leftIndicator","rightIndicator","leftIcon","rightIcon","freeCSS","wrapStyles"]),[i,p]=R(l.DefaultStatus(e,s));return l.CommonEffects({type:"contenteditable",states:t,val_status:i,set_status:p,SystemValidation:F}),d(D,{val_status:i,set_status:p,states:t,children:d(B,r(o({contentEditable:!0,"data-show-validation":l.isShowValidation(i,!!S),"data-component-id":i.componentId,onKeyDown:a=>{f&&f(a),h&&l.SubmitForm(a,n)},onInput:a=>{let E=a.currentTarget,{innerHTML:O,innerText:V}=E;p(v=>r(o({},v),{rawValue:V,eventType:"update",eventID:x(12),isInspected:!1,isValidated:!1,notice:[]})),m&&m(a)}},C),{children:T}))})},b=t=>{t=r(o({rows:5},t),{freeCSS:o({whiteSpace:"pre-wrap"},t.freeCSS)});let e=g(t);return d(w,{componentId:t.componentId,children:H,states:e})};export{b as Contenteditable,b as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as t,c as
|
|
1
|
+
import{b as t,c as o,d as F}from"../../chunk-C5N2D3ZX.js";import{jsx as S}from"react/jsx-runtime";import{useState as O}from"react";import _,{UUID as I}from"jmini";import{$$fromRoot as k,GenerateHTMLProps as K}from"../../@utils";import{OptionalInputWrapper as U,BoxWrapper as W,CoreEffects as V,DefaultBoxishStyles as $}from"./core";import{Flex as z}from"../../atoms";import{InputClasses as w}from"../../@styles/componentClasses";function P(e){let{value:n,states:u}=e,{required:d,numericOnly:p=!1,digits:D}=u,s=[];return d&&!n&&s.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),n&&(p&&n.match(/\D/)&&s.push({type:"invalid",label:"\u6570\u5B57\u306E\u307F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),n.length!=D&&s.push({type:"warn",label:"\u6700\u5F8C\u307E\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"})),{ok:!s.filter(({type:C})=>C=="invalid"||C=="warn").length,notice:s}}const q=(e,n="")=>{let u=String(n),d=[];for(let p=0;p<e;p++)d[p]=u[p]||"";return{safeValue:d,rawValue:u}},R=(e="")=>{let n=e,u=n.join("");return{safeValue:n,rawValue:u}},j=e=>{let x=e,{tone:n,required:u,form:d,name:p,className:D="",digits:s,numericOnly:h=!1,enableFormSubmit:C,checkValidationAtFirst:G,onChange:J,onKeyDown:Q,onValidate:X,onValidateDelay:Y,onUpdateValue:Z,onUpdateValidValue:ee,onUserAction:te,value:B="",override:ne,freeCSS:ae,wrapStyles:ie,combineInput:re,componentId:se,listStyles:M}=x,a=F(x,["tone","required","form","name","className","digits","numericOnly","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","override","freeCSS","wrapStyles","combineInput","componentId","listStyles"]),[c,f]=O(o(t({componentId:e.componentId||""},q(s,B)),{eventType:"init",eventID:I(12)}));V.CommonEffects({type:"textfield",states:e,val_status:c,set_status:f,SystemValidation:P});let b=[];for(let i=0;i<s;i++){let N=c.safeValue[i],E={},v=D;e.combineInput&&(v=[D,w("DigitCharacterCell"),w("Combined")].join(" ")),b.push(S("input",{type:"text",inputMode:h?"numeric":e.inputMode||"text",value:N,id:"Digit-"+i+"-"+c.componentId,className:v,style:t(t({},e.style),E),onKeyDown:m=>{let{key:l,code:H}=m;if(l=="Tab")return;m.preventDefault();let y=null;if(l=="Backspace"){let r=c.safeValue;r[i]="",f(g=>o(t(t({},g),R(r)),{eventType:"update",eventID:I(12),isInspected:!1})),y=i-1}else if(["ArrowLeft","ArrowRight"].includes(l)){let r=+(l=="ArrowRight")*2-1;y=i+r}else C&&V.SubmitForm(m,d),(()=>{let r=H.match(/^(Key(.)|Digit(\d)|Numpad(\d))/);if(!r)return;let g=r[2]||r[3]||r[4];if(h&&!g.match(/\d/)||!g)return;let T=c.safeValue;T[i]=g,f(L=>o(t(t({},L),R(T)),{eventType:"update",eventID:I(12),isInspected:!1})),y=i+1})();_.is.exist(y)&&k("#Digit-"+y+"-"+c.componentId).focus()},onChange:()=>{},onFocus:m=>{a!=null&&a.onFocus&&(a==null||a.onFocus(m)),f(l=>o(t({},l),{eventID:I(12),isFocusing:!0}))},onBlur:m=>{a!=null&&a.onBlur&&(a==null||a.onBlur(m)),f(l=>o(t({},l),{eventID:I(12),isFocusing:!1}))}},i))}return S(W,{val_status:c,set_status:f,states:e,children:S(z,o(t({gap:"1/2",flexChilds:"even",flexWrap:!1,flexSizing:"auto"},M),{children:b}))})},A=e=>{e=t({},e),e=t({textAlign:"center",width:0},e),e.combineInput&&(e=o(t({textAlign:"center",width:0},e),{freeCSS:t({minWidth:12*2,marginRight:-1},e.freeCSS),listStyles:t({borderRadius:"2.tone.secondary",border:"unset",gap:0},e.listStyles)}));let n=K($(e));return S(U,{componentId:e.componentId,children:j,states:n})};export{A as DigitCharacters,A as default};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ReactElement } from '../../@declares';
|
|
3
|
+
import { KeyValueDict } from 'jmini';
|
|
4
|
+
import { InputTypes } from '.';
|
|
5
|
+
declare namespace Drum {
|
|
6
|
+
type Input<T = Value> = InputTypes.CoreInput<T> & React.DOMAttributes<HTMLInputElement> & {
|
|
7
|
+
tabIndex?: number;
|
|
8
|
+
id?: string;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
isHorizontal?: boolean;
|
|
11
|
+
value?: T;
|
|
12
|
+
options: (Option<T> | null)[];
|
|
13
|
+
};
|
|
14
|
+
type Value<T = any> = T extends infer V ? V : string | number | boolean | KeyValueDict | void | null;
|
|
15
|
+
type Option<T = Value> = {
|
|
16
|
+
type?: 'selector';
|
|
17
|
+
id?: string;
|
|
18
|
+
value: T;
|
|
19
|
+
label?: ReactElement;
|
|
20
|
+
} | {
|
|
21
|
+
type: 'label';
|
|
22
|
+
id?: string;
|
|
23
|
+
value?: T;
|
|
24
|
+
label?: ReactElement;
|
|
25
|
+
};
|
|
26
|
+
type WrapperStates = {
|
|
27
|
+
rootStates: Input & {
|
|
28
|
+
value: Value[];
|
|
29
|
+
};
|
|
30
|
+
val_status: InputTypes.Status.Plain<Value>;
|
|
31
|
+
set_status: React.Dispatch<React.SetStateAction<InputTypes.Status.Plain>>;
|
|
32
|
+
};
|
|
33
|
+
type Component = {
|
|
34
|
+
<T = Value>(p: Input<Value<T>>): React.JSX.Element;
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
declare const Drum: Drum.Component;
|
|
38
|
+
export { Drum, Drum as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{b as a,c as p,d as _}from"../../chunk-C5N2D3ZX.js";import{Fragment as J,jsx as r,jsxs as O}from"react/jsx-runtime";import I,{UUID as S}from"jmini";import{useState as k,useEffect as z}from"react";import{$$fromRoot as M}from"../../@utils";import{Box as v,Column as U,CacheRender as $}from"../../atoms";import{Button as j}from"../Button";import{OptionalInputWrapper as q,BoxWrapper as N,CoreEffects as w,DefaultBoxishStyles as K}from"./core";function X(o){let{value:e,states:n}=o,{required:l}=n,t=[];return l&&e===null&&t.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!t.filter(({type:u})=>u=="invalid").length,notice:t}}const c={Original:o=>{let{rootStates:e,val_status:n,set_status:l}=o,R=e,{required:t,form:u,className:d,isHorizontal:s,enableFormSubmit:C,checkValidationAtFirst:W,onValidate:Y,onValidateDelay:G,onUpdateValue:Q,onUpdateValidValue:Z,onUserAction:ee,value:te="",options:E,componentId:D,status_id:oe,wrapStyles:ne}=R,A=_(R,["required","form","className","isHorizontal","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","componentId","status_id","wrapStyles"]),[i,B]=k(null);return z(()=>{let f=M(`[data-component-id="${D}"]`);if(!f[0])return;B(f[0]);let h="scroll.Drum-"+D;return f.addEvent({eventType:"scrollend",eventID:h,callback:b=>{I.interval.once(()=>{let{top:y,left:g,width:m,height:L}=f.position();const x=document.elementFromPoint(g+m/2,y+L/2);if(!x||!x.id)return;let[P,ae,F]=x.id.split("-");if(P!=n.componentId)return;let T=E[Number(F)];T&&l(V=>V.rawValue==T.value?p(a({},V),{eventID:S(12)}):p(a({},V),{rawValue:T.value,eventType:"update",eventID:S(12),isInspected:!1,isValidated:!1,notice:[]}))},50,"updateDrum")}}),()=>{f.removeEvent(h)}},[]),z(()=>{if(!i)return;let f=E.findIndex(m=>(m==null?void 0:m.value)==n.rawValue);if(f===-1)return;let h=I("#"+[n.componentId,"opt",f].join("-"))[0];if(!h)return;let b=i.position(),y=h.position();if(s){let m=h.offsetLeft-b.width/2+y.width/2;if(n.eventType=="update"||n.eventType=="override"){i==null||i.scroll({left:m,behavior:"smooth"});return}i.scrollLeft=m;return}let g=h.offsetTop-b.height/2+y.height/2;if(n.eventType=="update"||n.eventType=="override"){i==null||i.scroll({top:g,behavior:"smooth"});return}i.scrollTop=g},[i,n.rawValue]),O(U,p(a({gap:"1/4",tabIndex:0,position:"relative"},A),{"data-disabled":e.disabled,"data-show-validation":w.isShowValidation(n,!!W),"data-component-id":n.componentId,"data-input-origin":n.componentId,children:[r(c.Marker,p(a({},o),{val_parent:i})),r(c.EdgePadding,{}),r(c.Options,a({},o)),r(c.EdgePadding,{})]}))},Options:o=>{let{rootStates:e,val_status:n,set_status:l}=o;return r(J,{children:e.options.map((t,u)=>{if(!t)return null;let d=I.is.equal(t==null?void 0:t.value,n.rawValue);return t.type=="label"?r(v,{children:t.label||t.value},S(12)):r($,{params:{value:t.value,isSelected:d},forceRender:(s,C)=>s.isSelected!=C.isSelected,children:r(j.Clear,{id:[n.componentId,"opt",u].join("-"),tabIndex:-1,padding:"1/2",color:"cloud",border:"0.trans",ssEffectsOnActive:!1,isActive:d,isActiveStyles:{isSemiBoldFont:!0},freeCSS:{scrollSnapAlign:"center"},onClick:()=>{d||l(s=>p(a({},s),{rawValue:t.value,eventType:"update",eventID:S(12),isInspected:!1,isValidated:!1,notice:[]}))},children:t.label||t.value})},[u,t==null?void 0:t.value].join("-"))})})},Marker:o=>{let{rootStates:e,val_parent:n,val_status:l}=o,t=!e.isHorizontal;if(!n)return null;let u=e.options.findIndex(s=>(s==null?void 0:s.value)==l.rawValue);if(u===-1)return null;let d=I("#"+[l.componentId,"opt",u].join("-"))[0];return d?r(v,p(a({flexSizing:"none",transition:"short",position:"sticky"},t?{height:0}:{width:0}),{flexCenter:!0,freeCSS:a({pointerEvents:"none",zIndex:3},t?{top:"50%",transform:"translateY(-50%)"}:{left:"50%",transform:"translateX(-50%)"}),children:r(v,{transition:"short",boxShadow:"0.remark",borderRadius:"2.tone.secondary",backgroundColor:"theme.opa.few",border:!0,borderColor:"theme",flexSizing:"none",freeCSS:{height:d.position().height||0,width:d.position().width||0}})})):null},EdgePadding:()=>r(v,{flexSizing:"none",freeCSS:{width:"50%",height:"50%",pointerEvents:"none"}}),EdgeShadow:o=>o.position=="top"||o.position=="bottom"?r(v,{position:"absolute",borderRadius:"1.tone.primary",gradients:{deg:o.position=="top"?0:180,colors:["hsla(var(--color-layer0-hsl),0)","hsla(var(--color-layer0-hsl),.8)"]},freeCSS:{zIndex:10,[o.position]:1,left:1,right:1,height:"35%",pointerEvents:"none"}}):r(v,{position:"absolute",borderRadius:"1.tone.primary",freeCSS:{zIndex:10,[o.position]:1,top:1,bottom:1,width:"35%",pointerEvents:"none"}}),Core:o=>{let[e,n]=k(w.DefaultStatus(o.componentId,o.value)),l={rootStates:o,val_status:e,set_status:n};return w.CommonEffects({type:"drum",states:o,val_status:e,set_status:n,SystemValidation:X}),O(N,{val_status:e,set_status:n,states:o,children:[r(c.EdgeShadow,{position:o.isHorizontal?"left":"top"}),r(c.Original,a({},l)),r(c.EdgeShadow,{position:o.isHorizontal?"right":"bottom"})]})}},H=o=>{var n,l;let e=a({},o);return e=a({padding:"1/2",overflow:"auto"},e),e.isHorizontal?e=p(a({flexType:"row",flexWrap:!1},e),{freeCSS:a({whiteSpace:"nowrap",scrollSnapType:"x mandatory",maxWidth:12*24},e.freeCSS)}):e=p(a({},e),{freeCSS:a({scrollSnapType:"y mandatory",maxHeight:12*20,minWidth:12*6},e.freeCSS)}),e.value=(n=e.value)!=null?n:null,(l=e.options)==null||l.forEach((t,u)=>{if(!t)return;let{type:d,value:s}=t;e.options[u]=p(a({id:S(12)},t),{value:s,type:d||"selector"})}),r(q,{componentId:e.componentId,children:c.Core,states:K(e)})};export{H as Drum,H as default};
|
package/dist/fn/Input/Filer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as r,c as f,d as
|
|
1
|
+
import{b as r,c as f,d as G,e as O}from"../../chunk-C5N2D3ZX.js";import{Fragment as ne,jsx as a,jsxs as m}from"react/jsx-runtime";import{useState as Q,useEffect as Y}from"react";import H,{UUID as b,useStore as ee}from"jmini";import{$$fromRoot as _,ExtractStyles as se}from"../../@utils";import{Box as S,FAI as z,Flex as R,Column as te}from"../../atoms";import{Row as re}from"../../mols";import{Button as L}from"../Button";import j from"../Snackbar";import{OptionalInputWrapper as pe,BoxWrapper as ue,CoreEffects as le,DefaultBoxishStyles as me}from"./core";import ce from"./TextField";import{InputFilerClasses as y}from"../../@styles/componentClasses";import{faCloudArrowUp as de}from"@fortawesome/free-solid-svg-icons/faCloudArrowUp";function fe(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:p})=>p=="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,p=(o.rawValue||[]).map((n,u)=>a(ae.ListCell,f(r({},e),{index:u,val_file:n}),n.name));return l>0&&p.push(a(S,f(r({htmlTag:"label"},t.cellStyles),{className:[t.cellClassName,y("AddButton")].join(" "),"data-component-id":o.componentId,htmlFor:t.id,tabIndex:t.tabIndex,onKeyDown:n=>{let{key:u}=n;t.tabIndex!=-1&&[" ","Enter"].includes(u)&&_("#"+t.id).click()},children:m(re.Center,{padding:["1/3",0],children:[a(S,{isRounded:!0,className:y("AddIcon"),children:a(z,{icon:de,className:y("Icon"),fontColor:"theme",fontSize:"4.thirdTitle",backgroundColor:"theme.opa.low",ssSphere:3,padding:"1/2"})}),m(S,{children:[m(S,{fontColor:"theme",fontSize:"2.normal",isSemiBoldFont:!0,children:["\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E(",l,")"]}),a(S,{fontColor:"4.thin",fontSize:"0.xs",isSemiBoldFont:!0,children:"\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7"})]})]})}),"AddButton")),a(te,f(r({flexSizing:"auto"},se(t)),{className:t.className,children:p}))},ListCell:e=>{let{index:t,rootStates:o,val_file:c,val_status:l,set_status:p}=e,{name:n,size:u,type:i}=c,[d,v]=Q(!1),I=b(),J=u.rank(),[K,P]=n.replace(/\s/g,"_").replace(/(.*)\.(.*)$/,"$1 $2").split(" "),s="\u30D5\u30A1\u30A4\u30EB";return i.match(/image/)?s=i.replace(/image\//,""):i.match(/pdf/)?s="PDF":i.match(/csv/)?s="CSV":i.match(/spreadsheet/)?s="SpreadSheet":i.match(/presentation/)?s="PowerPoint":i.match(/word/)?s="Word":i.match(/zip/)?s="Zip":i.match(/powerpoint/)?s="PowerPoint":i.match(/html/)?s="HTML":i.match(/js/)?s="JavaScript":i.match(/css/)?s="CSS":i.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:[a(z.File,{fontSize:"4.thirdTitle",fontColor:"4.thin"}),m(S,{flexSizing:0,children:[a(S,{children:a(R,{verticalAlign:"center",gap:"2/3",flexWrap:!1,className:y("FileName"),children:d?a(ne,{children:m(te,{flexSizing:0,gap:"1/2",children:[m(R,{gap:"2/3",verticalAlign:"center",children:[a(ce,{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(S,{children:[". ",P]})]}),m(R,{gap:"2/3",horizontalAlign:"right",flexWrap:!1,children:[a(L.Sub.S,{padding:["2/3",1],onClick:()=>{v(!1)},children:"\u9589\u3058\u308B"}),a(L.Prime.S,{padding:["2/3",1],onFormSubmit:["form-"+I,F=>O(void 0,null,function*(){let{name:B}=F.body,w=[...l.rawValue],A=w[t],X=A.id;if(!A)return;let W=yield String(yield A.convert("dataURL")).toBlob(c.type);if(!W)return;let M=new File([W],B+"."+P,{type:A.type});M.id=X,w[t]=M,p($=>f(r({},$),{rawValue:w,eventType:"update",eventID:b(12),isInspected:!1})),v(!1)})],children:"\u6C7A\u5B9A"})]})]})}):m(ne,{children:[n,!!o.isNameEditable&&a(L.Clear,{ssSphere:2.5,flexSizing:"none",fontColor:"4.thin",padding:"1/3",ssEffectsOnActive:"expand",color:"cloud",onClick:()=>{v(!0)},children:a(z.Pen,{})})]})})}),!d&&m(S,{fontSize:"1.mini",fontColor:"4.thin",flexSizing:0,children:[s,"\u30D5\u30A1\u30A4\u30EB / ",J,"B"]})]}),a(L.Sub,{color:"cloud",fontColor:"4.thin",ssSphere:3,onClick:()=>{let F=[...l.rawValue];F[t]&&(F.splice(t,1),p(w=>f(r({},w),{rawValue:F,eventType:"update",eventID:b(12),isInspected:!1})))},children:a(z.X,{})})]}))}},ge=e=>{let Z=e,{tone:t,required:o,form:c,isNameEditable:l,useSystemOnly:p,accept:n="*",limit:u=1,checkValidationAtFirst:i,onChange:d,onValidate:v,onValidateDelay:I,onUpdateValue:J,onUpdateValidValue:K,onUserAction:P,value:s=[],className:F,cellStyles:B,cellClassName:w,componentId:A,status_id:X,enableFormSubmit:oe,freeCSS:W,wrapStyles:M}=Z,$=G(Z,["tone","required","form","isNameEditable","useSystemOnly","accept","limit","checkValidationAtFirst","onChange","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","className","cellStyles","cellClassName","componentId","status_id","enableFormSubmit","freeCSS","wrapStyles"]),[T,N]=Q(le.DefaultStatus(e.componentId||"",s)),ie={rootStates:e,val_status:T,set_status:N};Y(()=>{ee.set({["AddFiles-"+T.componentId]:x=>{N(D=>{let C=D.rawValue,V=[];for(var g=0;g<(x==null?void 0:x.length);g++){let h=x[g],{type:k,name:E}=h;if(g+1+C.length>u){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(n&&n=="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(h)}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:N,SystemValidation:fe});let U="";return n&&(n=="image"?U="image/png,image/jpeg":U=n),m(ue,{val_status:T,set_status:N,states:e,children:[a(S,f(r({htmlTag:"input",type:"file",className:y("Input"),"data-component-id":T.componentId,accept:U,multiple:u!=1,onChange:x=>O(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 h=C[g].clone(),k=h.name;if(h.id=b(),g+1+T.rawValue.length>u){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(h)}N(h=>f(r({},h),{rawValue:[...h.rawValue,...V],eventType:"update",eventID:b(12),isInspected:!1})),D.value=""})},$),{opacity:"low",tabIndex:-1,value:""})),a(ae.List,r({},ie))]})},q=e=>(e=f(r({limit:1,isNameEditable:!0,useSystemOnly:!1,tone:"border",value:[]},e),{override:"force",cellStyles:r(r({},me({tone:e.tone||"border"})),e.cellStyles)}),a(pe,{componentId:e.componentId,children:ge,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),H("body").append(l),l.onchange=p=>{var i;let n=((i=p==null?void 0:p.target)==null?void 0:i.files)||[];if(!(n!=null&&n.length))return;let u=[];for(let d=0;d<n.length;d++){let I=n[d].clone();u.push(I)}e.onChange(u),H("#"+c).remove()},l.click()}},typeof window!="undefined"&&window.document&&H(document).addEvent({eventType:"dragover",callback:e=>{e.preventDefault(),_("."+y("AddButton")).addClass(y("Draggable"))},options:{passive:!1}}).addEvent({eventType:"drop",callback: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)}}},options:{passive:!1}});export{q as Filer,q as default};
|
package/dist/fn/Input/Hidden.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as n,c as
|
|
1
|
+
import{b as n,c as o,d as u}from"../../chunk-C5N2D3ZX.js";import{jsx as m}from"react/jsx-runtime";import p,{UUID as s}from"jmini";import{useState as f,useEffect as y}from"react";import{OptionalInputWrapper as v,CoreEffects as b}from"./core";const g=e=>{let r=e,{componentId:l="",enableFormSubmit:D,form:H,value:t=""}=r,c=u(r,["componentId","enableFormSubmit","form","value"]),[a,i]=f({componentId:e.componentId||"",rawValue:t,eventType:"init",eventID:s(12)});return y(()=>{p.is.equal(a.rawValue,t)||i(I=>o(n({},I),{rawValue:t,eventType:"update",eventID:s(12),isInspected:!1}))},[e.value]),b.CommonEffects({type:"hidden",states:e,val_status:a,set_status:i,SystemValidation:()=>({ok:!0,notice:[]})}),m("input",o(n({value:p.Stringify(t),"data-component-id":l},c),{type:"hidden"}))},d=e=>m(v,{componentId:e.componentId,children:g,states:e});export{d as Hidden,d as default};
|
package/dist/fn/Input/List.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ declare namespace List {
|
|
|
7
7
|
type IconType = Type;
|
|
8
8
|
type Tone = 'normal' | 'border' | 'cloud' | 'plain';
|
|
9
9
|
type Size = 'small' | 'regular' | 'large';
|
|
10
|
+
type Value<T = any> = T extends infer V ? V : string | number | boolean | KeyValueDict | void | null;
|
|
10
11
|
type Input<T = Value, O = T> = InputTypes.CoreInput<O> & {
|
|
11
12
|
type?: Type;
|
|
12
13
|
tone?: Tone;
|
|
@@ -34,7 +35,6 @@ declare namespace List {
|
|
|
34
35
|
type: Type;
|
|
35
36
|
tone: Tone;
|
|
36
37
|
};
|
|
37
|
-
type Value<T = any> = T extends infer V ? V : string | number | boolean | KeyValueDict | void | null;
|
|
38
38
|
type Option<T = Value> = {
|
|
39
39
|
value: T;
|
|
40
40
|
label?: ReactElement;
|
package/dist/fn/Input/List.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as o,c as m,d as
|
|
1
|
+
import{b as o,c as m,d as z}from"../../chunk-C5N2D3ZX.js";import{jsx as a}from"react/jsx-runtime";import C,{UUID as F}from"jmini";import{useState as ie}from"react";import{$$fromRoot as ae,GenerateHTMLProps as ne}from"../../@utils";import{Box as I,Flex as se,FAI as re,Span as ce}from"../../atoms";import{Button as ue}from"../Button";import{OptionalInputWrapper as de,BoxWrapper as me,CoreEffects as B}from"./core";import{InputListClasses as T}from"../../@styles/componentClasses";function pe(t){let{value:l,states:i}=t,{type:e,required:s,min:n,max:p}=i;n=n||0,p=p||65535;let c=[],S=l.length;return s&&(S||e=="radio"&&c.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),S<n&&c.push({type:"invalid",label:n+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),S>p&&c.push({type:"invalid",label:p+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!c.filter(({type:V})=>V=="invalid").length,notice:c}}const h={InitOptions:t=>{let l=[];return t.forEach(i=>{if(!i)return;let{label:e,value:s}=i;C.is.nullish(e)&&(e=String(s)),l.push(m(o({},i),{label:e,value:s}))}),l},OptionalListWrapper:t=>{let{value:l,options:i=[]}=t,e=C.is.exist(l)?C.flatArray(l):[],s=[];return e.forEach(n=>{i.findIndex(c=>C.is.equal(c.value,n))!=-1&&s.push(n)}),a(h.Core,m(o({},t),{value:s,options:i}))},Core:t=>{let g=t,{type:l,tone:i,required:e,componentId:s="",form:n,override:p,icon:c,iconType:S,iconSize:V,iconPosition:J,iconColor:v,CustomIcon:P,enableFormSubmit:X,checkValidationAtFirst:A,onValidate:$,onValidateDelay:N,onUpdateValue:U,onUpdateValidValue:W,onUserAction:H,value:f,options:q,className:K,cellStyles:j,cellClassName:G,cellCheckedStyles:Q,cellCheckedClassName:E,min:u,max:R,hideInput:b,freeCSS:Y,wrapStyles:x}=g,Z=z(g,["type","tone","required","componentId","form","override","icon","iconType","iconSize","iconPosition","iconColor","CustomIcon","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","className","cellStyles","cellClassName","cellCheckedStyles","cellCheckedClassName","min","max","hideInput","freeCSS","wrapStyles"]),[O,L]=ie(B.DefaultStatus(s,f));return B.CommonEffects({type:"list."+l,states:t,val_status:O,set_status:L,SystemValidation:pe}),a(me,{val_status:O,set_status:L,states:t,children:a(h.List,{rootStates:t,val_status:O,set_status:L})})},List:t=>{let{rootStates:l,val_status:i,set_status:e}=t,{componentId:s,type:n,tone:p,icon:c,iconSize:S,iconColor:V,isChecker:J,options:v,name:P,form:X,tabIndex:A,hideInput:$,disabled:N,className:U,cellStyles:W,cellClassName:H="",cellCheckedStyles:f,cellCheckedClassName:q="",enableFormSubmit:K}=l,j=l.CustomIcon,G=v.map((Q,E)=>{let oe=Q,{value:u,label:R,disabled:b,className:Y="",checkedStyles:x,checkedClassName:Z="",freeCSS:O}=oe,L=z(oe,["value","label","disabled","className","checkedStyles","checkedClassName","freeCSS"]),g=F(),w=i.rawValue.findIndex(r=>r===u||C.is.equal(r,u))!=-1,y=o(o({},W),L),D=[T("Label"),H,Y];w&&(y=m(o(o(o({},y),f),x),{freeCSS:o(o(o({},y==null?void 0:y.freeCSS),f==null?void 0:f.freeCSS),x==null?void 0:x.freeCSS)}),D=[...D,q,Z]);const ee=()=>{if(N||b)return;let r=[];if(n=="radio")r=[u];else if(n=="checkbox"||J)if(!w)r=[...i.rawValue,u];else{let d=[...i.rawValue];d.splice(i.rawValue.findIndex(_=>_==u),1),r=d}e(d=>m(o({},d),{rawValue:r,eventType:"update",eventID:F(12),isInspected:!1}))};let te=[a(ce,{position:"relative",freeCSS:{zIndex:2},flexSizing:0,children:C.is.string(R)?a(I,{children:R}):R},"content")];return c&&te[l.iconPosition=="right"?"push":"unshift"](a(j,{isChecked:w,iconSize:S,iconColor:V,toggle:ee},"icon")),[a(I,{htmlTag:"input",type:n=="radio"?"radio":"checkbox",className:T("Input"),name:"RadioCheckbox-"+P,"data-list-index":s+"-"+E,id:g,value:String(u),disabled:N||b,checked:w,onFocus:r=>{b||n=="radio"&&(i.rawValue.length||e(d=>m(o({},d),{rawValue:[u],eventType:"update",eventID:F(12),isInspected:!1})))},onChange:()=>{ee()},onKeyDown:r=>{let{key:d,shiftKey:_}=r;if((n=="checkbox"||t.rootStates.isChecker)&&d!="Tab"){if(d.match(/Arrow/)){r.preventDefault();let le=["ArrowLeft","ArrowUp"].includes(d)?-1:1,k=E+le;k<0?k=v.length-1:k>=v.length&&(k=0),ae(`input[data-list-index="${s}-${k}"]`).focus()}}K&&B.SubmitForm(r,X)},tabIndex:A},"List-"+C.Stringify(u)),a(I,m(o({htmlTag:"label","data-disabled":N||b,htmlFor:g,className:D.join(" "),tabIndex:-1,display:"flex",verticalAlign:"center",flexWrap:!1},y),{children:te}),"ListTrigger-"+C.Stringify(u))]});return a(se,{flexSizing:"auto",style:l.style,freeCSS:o({},l.freeCSS),className:[U,T("CellBase"),T("HideInput_"+$),T("IconIndicator_"+!!c),T("Tone_"+p)].join(" "),children:G})},_Icon:t=>{let l=1.5;return t.iconSize=="small"?l=1.2:t.iconSize=="large"&&(l=2),a(ue.Normal,{ssPushable:!0,color:"cloud",tabIndex:-1,ssEffectsOnActive:"ripple.cloud",ssSphere:2,freeCSS:{transform:`scale(${l})`},onClick:i=>{i.preventDefault(),i.stopPropagation(),t.toggle()},children:t.children})},RadioIcon:t=>a(h._Icon,m(o({type:"radio"},t),{children:a(I,{flexCenter:!0,isRounded:!0,border:t.isChecked?"0.trans":"3.thick",borderColor:t.isChecked?t.iconColor:"3.thick",position:"relative",transition:"middle",freeCSS:{width:"50%",height:"50%"},children:a(I,{position:"absolute",transition:"middle",isRounded:!0,backgroundColor:t.iconColor,opacity:t.isChecked?"max":"trans",freeCSS:{width:"60%",height:"60%",transform:t.isChecked?"scale(1)":"scale(.4)"}})})})),CheckboxIcon:t=>a(h._Icon,m(o({type:"checkbox"},t),{children:a(I,{flexCenter:!0,boxShadow:t.isChecked?"0.remark":"none",border:t.isChecked?"0.trans":"3.thick",backgroundColor:t.isChecked?t.iconColor:"trans",position:"relative",transition:"middle",fontColor:"white",freeCSS:{borderRadius:"25%",padding:"4%",width:"50%",height:"50%"},children:a(re.Check,{transition:"middle",opacity:t.isChecked?"max":"trans",freeCSS:{zIndex:8,width:"100%",height:"100%",transform:t.isChecked?"scale(1)":"scale(.5)"}})})}))},M=t=>{t=t||"checkbox";const l=e=>(e=m(o({gap:1,icon:!0,iconSize:"regular",iconType:t=="radio"?"radio":"checkbox",iconPosition:"left",iconColor:"theme"},e),{type:t,cellStyles:o({gap:"1/6",position:"relative",borderRadius:"2.tone.secondary",transition:"middle"},e.cellStyles)}),e.CustomIcon||(e.iconType=="radio"?e.CustomIcon=h.RadioIcon:e.iconType=="checkbox"&&(e.CustomIcon=h.CheckboxIcon)),e.iconSize=="small"?e.cellStyles.gap=0:e.iconSize=="large"&&(e.cellStyles.gap="1/2"),e.tone=="normal"?(e.cellStyles=o({padding:["1/4",1],border:"1.thin",backgroundColor:"layer.1"},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme",boxShadow:"1.normal"},e.cellCheckedStyles)):e.tone=="border"?(e.cellStyles=o({border:"1.thin",backgroundColor:"layer.1",padding:["1/2",1,"1/2","1/2"]},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme"},e.cellCheckedStyles)):e.tone=="cloud"&&(e.cellStyles=o({border:"1.thin",backgroundColor:"layer.2",padding:["1/2",1,"1/2","1/2"]},e.cellStyles),e.cellCheckedStyles=o({backgroundColor:"cloud",fontColor:"theme"},e.cellCheckedStyles)),e=ne(e),e.options=h.InitOptions(e.options),a(de,{componentId:e.componentId,children:h.OptionalListWrapper,states:e})),i=l;return i.Normal=e=>a(l,o({type:t,tone:"normal",icon:!1},e)),i.Border=e=>a(l,o({type:t,tone:"border"},e)),i.Cloud=e=>a(l,o({type:t,tone:"cloud"},e)),i.Vivid=e=>a(l,o({type:t,tone:"normal",icon:!1,cellCheckedStyles:{backgroundColor:"theme",fontColor:"white"}},e)),i.Simple=e=>a(l,o({type:t,tone:"plain",icon:!1,cellCheckedStyles:{fontColor:"theme"}},e)),i},Ce=M("radio"),he=M("checkbox"),Se=M();export{he as Checkbox,Se as List,Ce as Radio};
|
|
@@ -30,13 +30,11 @@ declare namespace Select {
|
|
|
30
30
|
id?: string;
|
|
31
31
|
value: T;
|
|
32
32
|
label?: ReactElement;
|
|
33
|
-
searchValue?: string;
|
|
34
33
|
} | {
|
|
35
34
|
type: 'label';
|
|
36
35
|
id?: string;
|
|
37
36
|
value?: T;
|
|
38
37
|
label?: ReactElement;
|
|
39
|
-
searchValue?: string;
|
|
40
38
|
};
|
|
41
39
|
type WrapperStates = {
|
|
42
40
|
rootStates: Input & {
|
package/dist/fn/Input/Select.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as o,c as d,d as q}from"../../chunk-C5N2D3ZX.js";import{Fragment as te,jsx as a,jsxs as V}from"react/jsx-runtime";import S,{UUID as C}from"jmini";import{useState as A,useEffect as z}from"react";import{ExtractStyles as he}from"../../@utils";import{Box as h,FAI as Z,Column as Ce}from"../../atoms";import{Literal as E,Row as H}from"../../mols";import{Button as Ve}from"../Button";import{Sheet as Oe}from"../Sheet";import{OptionalInputWrapper as xe,BoxWrapper as Fe,CoreEffects as k,DefaultBoxishStyles as Te}from"./core";import{InputAutocompleteClasses as R}from"../../@styles/componentClasses";import{InputLabel as _e}from"./Label";import{RightIcon as we}from".";function De(e){let{value:t,states:l}=e,{required:s,options:i}=l,m=[];return s&&t===null&&m.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!m.filter(({type:u})=>u=="invalid").length,notice:m}}const b={FilterSelectableOptions:(e,t)=>{let l=e.rootStates.options;return t||(l=l.filter(s=>(s==null?void 0:s.type)!="label")),l},Shallow:e=>{let{rootStates:t,val_status:l}=e,s=he(t);return a(h,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:a(E.Description,d(o({className:t.className},s),{position:"absolute",width:1,freeCSS:d(o({},s.freeCSS),{color:"orange"}),children:a(h,{"data-input-value-shallow":l.componentId,children:"A"})}))})},Button:e=>V(te,{children:[a(b.LegacySelector,o({},e)),a(b.Original,o({},e))]}),Placeholder:e=>!e.rootStates.placeholder||e.val_status.dataValue!==null?null:a(h,{position:"absolute",opacity:"middle",fontColor:"3.blur",children:e.rootStates.placeholder||""}),Original:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:l,set_preventOpenSelectorOnFocus:s,val_optionFocused:i,set_optionFocused:m,val_status:u,set_status:g,val_selectorOpen:y,set_selectorOpen:p}=e,N=t,{tone:B,required:F,form:T,className:O,label:le,isLabelActive:ae,placeholder:oe,enableFormSubmit:L,emptySelect:$,checkValidationAtFirst:W,onValidate:ne,onValidateDelay:re,onUpdateValue:se,onUpdateValidValue:ie,onUserAction:ue,value:P="",options:M,leftIndicator:ce,rightIndicator:j,leftIcon:de,rightIcon:Se,componentId:pe,status_id:fe,wrapStyles:me,SelectedCellStyles:ye,SelectorCellStyles:ve,SelectorMode:ge,SelectorStyles:be,SelectorPosition:Ie}=N,n=q(N,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorMode","SelectorStyles","SelectorPosition"]);return z(()=>{if(e.rootStates.SelectorMode!="original"||t.disabled)return;let c="select-click-"+t.componentId;if(y){if(!S('[data-input-origin="'+t.componentId+'"]'))return;S(document).addEvent({eventID:c,eventType:"click",callback:r=>{let _=S(r.target),w=!!S(_).parent("."+R("Core")).length;S(_).parent("."+R("Selector")).length||w||p(!1)}})}else S(document).removeEvent([c])},[y]),z(()=>{if(e.rootStates.SelectorMode!="original"||u.eventType=="init"||!y)return;let c=S('[data-input-origin="'+t.componentId+'"]');c&&c.focus()},[u.dataValue]),e.rootStates.SelectorMode!="original"?null:V(te,{children:[a(h,d(o({tabIndex:0},n),{"data-disabled":t.disabled,"data-show-validation":k.isShowValidation(u,!!W),"data-component-id":u.componentId,"data-input-origin":u.componentId,className:[O,R("Core")].join(" "),onFocus:c=>{if(n!=null&&n.onFocus&&(n==null||n.onFocus(c)),g(f=>d(o({},f),{eventID:C(12),isFocusing:!0})),!t.disabled){if(l)return s(!1);p(!0)}},onBlur:c=>{n!=null&&n.onBlur&&(n==null||n.onBlur(c)),g(f=>d(o({},f),{eventID:C(12),isFocusing:!1}))},onClick:c=>{n!=null&&n.onClick&&(n==null||n.onClick(c)),!t.disabled&&p(!0)},onKeyDown:c=>{let{key:f,metaKey:r,ctrlKey:_}=c,w=r||_;if(n!=null&&n.onKeyDown&&(n==null||n.onKeyDown(c)),L&&k.SubmitForm(c,T),!t.disabled){if(S.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(f))return;if(c.preventDefault(),!y)return p(!0);let I=f=="ArrowDown"?1:-1,v=b.FilterSelectableOptions(e),K=v.length-1,x=null;S.scope(()=>{var J,X,G,Q,Y;let D=v.findIndex(U=>(U==null?void 0:U.id)==i);if(I==1){if(x=(J=v[0])==null?void 0:J.id,w){x=v[K].id;return}if(D==-1||D==K)return;x=(X=v[D+1])==null?void 0:X.id}else{if(x=(G=v[K])==null?void 0:G.id,w){x=(Q=v[0])==null?void 0:Q.id;return}if(D==-1||D==0)return;x=(Y=v[D-1])==null?void 0:Y.id}}),m(x)}),f=="Escape")p(!1);else if(f=="Tab")p(!1);else if(f=="Backspace")g(I=>d(o({},I),{dataValue:null,eventType:"update",eventID:C(12),isInspected:!1}));else if(f==" ")c.preventDefault(),p(!0);else if(f=="Enter"){if(!y)return p(!0);c.preventDefault();let I=t.options.find(v=>(v==null?void 0:v.id)==i);if(!I)return;g(v=>d(o({},v),{dataValue:I==null?void 0:I.value,eventType:"update",eventID:C(12),isInspected:!1})),p(!1)}}},children:V(H.Left,{gap:0,children:[a(h,{freeCSS:{width:0},overflow:"hidden",opacity:"trans",children:"A"}),V(H.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[a(b.Placeholder,o({},e)),a(b.Selected,o({},e))]})]})})),y&&a(b.Selector,o({},e))]})},LegacySelector:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:l,set_preventOpenSelectorOnFocus:s,val_optionFocused:i,set_optionFocused:m,val_status:u,set_status:g,val_selectorOpen:y,set_selectorOpen:p}=e,f=t,{tone:B,required:F,form:T,className:O,label:le,isLabelActive:ae,placeholder:oe,enableFormSubmit:L,emptySelect:$,checkValidationAtFirst:W,onValidate:ne,onValidateDelay:re,onUpdateValue:se,onUpdateValidValue:ie,onUserAction:ue,onKeyDown:P,onChange:M,value:ce="",options:j,leftIndicator:de,rightIndicator:Se,leftIcon:pe,rightIcon:fe,componentId:me,status_id:ye,wrapStyles:ve,SelectedCellStyles:ge,SelectorCellStyles:be,SelectorMode:Ie,SelectorStyles:n,SelectorPosition:N}=f,c=q(f,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","onKeyDown","onChange","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorMode","SelectorStyles","SelectorPosition"]);return e.rootStates.SelectorMode!="legacy"?null:V(h,d(o({htmlTag:"select",tabIndex:0},c),{"data-disabled":t.disabled,"data-show-validation":k.isShowValidation(u,!!W),"data-component-id":u.componentId,"data-input-origin":u.componentId,className:[O,R("Core")].join(" "),onKeyDown:r=>{P&&P(r),L&&k.SubmitForm(r,T)},onChange:r=>{let{value:_}=r.target;g(w=>d(o({},w),{dataValue:_,eventType:"update",eventID:C(12),isInspected:!1,isValidated:!1,notice:[]})),M&&M(r)},children:[!!$&&a("option",{value:"null",children:"\u9078\u629E"}),j.map(r=>S.is.nullish(r==null?void 0:r.value)?null:a("option",{value:r==null?void 0:r.value,children:(r==null?void 0:r.label)||(r==null?void 0:r.value)},String(r==null?void 0:r.value)))]}))},Selector:e=>{var s;z(()=>{let i=S(`[data-selector-id="${e.val_status.componentId}"]`)[0];if(!i)return;let m=S(`[data-select-input-value="${e.val_optionFocused}"]`)[0];m&&(i.scrollTop=m.offsetTop-24)},[e.val_optionFocused]);let t=b.FilterSelectableOptions(e,!0),l={position:"absolute",minWidth:1,freeCSS:{zIndex:1e3}};switch(e.rootStates.SelectorPosition){case 1:l.bottom="100%",l.left=0,l.paddingBottom="1/3";break;case 2:l.bottom="100%",l.right=0,l.paddingBottom="1/3";break;case 3:l.top="100%",l.left=0,l.paddingTop="1/3";break;case 4:l.top="100%",l.right=0,l.paddingTop="1/3";break;default:break}return a(h,d(o({},l),{children:a(Oe.Body,d(o({className:R("Selector"),ssCardBox:!0,borderRadius:"2.tone.secondary",boxShadow:"1.normal",overflow:"auto","data-selector-id":e.val_status.componentId},e.rootStates.SelectorStyles),{freeCSS:o({minWidth:12*6,maxHeight:12*24},(s=e.rootStates.SelectorStyles)==null?void 0:s.freeCSS),children:V(Ce,{gap:"1/12",padding:[1,0],children:[t.map((i,m)=>{if(!i)return null;let{type:u,value:g}=i,y=e.val_optionFocused==i.id,p=e.val_status.dataValue===g;return u=="label"?a(h,{children:i.label||i.value},C()):a(Ve.Sub.S,d(o({"data-select-input-value":i.id,color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1],isActive:p||y,isActiveStyles:y?{backgroundColor:"cloud"}:{backgroundColor:"theme.opa.few",fontColor:"theme"}},e.rootStates.SelectorCellStyles),{onClick:B=>{e.set_status(F=>d(o({},F),{dataValue:g,eventType:"update",eventID:C(12),isInspected:!1})),e.set_selectorOpen(!1),e.set_preventOpenSelectorOnFocus(!0)},children:V(H.Left,{gap:"1/2",children:[p&&a(Z.Check,{fontColor:"theme"}),a(E.Supplement,{transition:"short",flexSizing:0,children:i.label||i.value})]})}),i.id)}),!t.length&&a(E.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]})}))}))},Selected:e=>{let t=e.rootStates.options.find(l=>S.is.equal(l==null?void 0:l.value,e.val_status.dataValue));return!t||e.val_status.dataValue===null&&(e.rootStates.label||e.rootStates.placeholder)?null:a(h,d(o({},e.rootStates.SelectedCellStyles),{children:(t==null?void 0:t.label)||(t==null?void 0:t.value)}),String(t==null?void 0:t.value))},Core:e=>{var F,T;let{value:t}=e,[l,s]=A(k.DefaultStatus(e.componentId,t)),[i,m]=A(!1),[u,g]=A(!1),[y,p]=A(((F=e.options.find(O=>(O==null?void 0:O.value)===e.value))==null?void 0:F.id)||((T=e.options[0])==null?void 0:T.id)||""),B={rootStates:e,val_preventOpenSelectorOnFocus:i,set_preventOpenSelectorOnFocus:m,val_optionFocused:y,set_optionFocused:p,val_selectorOpen:u,set_selectorOpen:g,val_status:l,set_status:s};return k.CommonEffects({type:"select",states:e,val_status:l,set_status:s,SystemValidation:De}),V(Fe,{val_status:l,set_status:s,states:e,children:[a(_e,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:e.isLabelActive||l.dataValue!==null}),a(b.Shallow,o({},B)),a(b.Button,o({},B))]})}},ee=e=>{var l;let t=o({},e);return t=d(o({emptySelect:!0,SelectorMode:"original",SelectorPosition:3},t),{freeCSS:o({cursor:"pointer"},t.freeCSS)}),t.emptySelect&&(t.options=[{value:null,label:a(E.Supplement,{fontColor:"4.thin",children:"\u672A\u9078\u629E"})},...t.options]),t.value=(l=t.value)!=null?l:null,t.options.forEach((s,i)=>{if(!s)return;let{type:m,value:u,searchValue:g}=s,y=g||S.is.string(u)&&u||S.Stringify(u||"")||"";t.options[i]=d(o({id:C()},s),{value:u,searchValue:y,type:m||"selector"})}),S.is.nullish(t.rightIcon)&&(t.rightIcon=a(we,{children:a(Z.AngleDown,{})})),a(xe,{componentId:t.componentId,children:b.Core,states:Te(t)})};export{ee as Select,ee as default};
|
|
1
|
+
import{b as o,c as d,d as q}from"../../chunk-C5N2D3ZX.js";import{Fragment as te,jsx as a,jsxs as w}from"react/jsx-runtime";import y,{UUID as C}from"jmini";import{useState as A,useEffect as z}from"react";import{ExtractStyles as he}from"../../@utils";import{Box as h,FAI as Z,Column as Ce}from"../../atoms";import{Literal as E,Row as H}from"../../mols";import{Button as we}from"../Button";import{Sheet as Oe}from"../Sheet";import{OptionalInputWrapper as Ve,BoxWrapper as xe,CoreEffects as k,DefaultBoxishStyles as Fe}from"./core";import{InputAutocompleteClasses as R}from"../../@styles/componentClasses";import{InputLabel as Te}from"./Label";import{RightIcon as _e}from".";function De(e){let{value:t,states:l}=e,{required:i,options:s}=l,f=[];return i&&t===null&&f.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!f.filter(({type:c})=>c=="invalid").length,notice:f}}const b={FilterSelectableOptions:(e,t)=>{let l=e.rootStates.options;return t||(l=l.filter(i=>(i==null?void 0:i.type)!="label")),l},Shallow:e=>{let{rootStates:t,val_status:l}=e,i=he(t);return a(h,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:a(E.Description,d(o({className:t.className},i),{position:"absolute",width:1,freeCSS:d(o({},i.freeCSS),{color:"orange"}),children:a(h,{"data-input-value-shallow":l.componentId,children:"A"})}))})},Button:e=>w(te,{children:[a(b.LegacySelector,o({},e)),a(b.Original,o({},e))]}),Placeholder:e=>!e.rootStates.placeholder||e.val_status.rawValue!==null?null:a(h,{position:"absolute",opacity:"middle",fontColor:"3.blur",children:e.rootStates.placeholder||""}),Original:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:l,set_preventOpenSelectorOnFocus:i,val_optionFocused:s,set_optionFocused:f,val_status:c,set_status:v,val_selectorOpen:g,set_selectorOpen:S}=e,N=t,{tone:B,required:x,form:F,className:O,label:le,isLabelActive:ae,placeholder:oe,enableFormSubmit:L,emptySelect:$,checkValidationAtFirst:W,onValidate:ne,onValidateDelay:re,onUpdateValue:se,onUpdateValidValue:ie,onUserAction:ue,value:P="",options:M,leftIndicator:ce,rightIndicator:j,leftIcon:de,rightIcon:Se,componentId:pe,status_id:fe,wrapStyles:me,SelectedCellStyles:ye,SelectorCellStyles:ve,SelectorMode:ge,SelectorStyles:be,SelectorPosition:Ie}=N,n=q(N,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorMode","SelectorStyles","SelectorPosition"]);return z(()=>{if(e.rootStates.SelectorMode!="original"||t.disabled)return;let u="select-click-"+t.componentId;if(g){if(!y('[data-input-origin="'+t.componentId+'"]'))return;y(document).addEvent({eventID:u,eventType:"click",callback:r=>{let T=y(r.target),_=!!y(T).parent("."+R("Core")).length;y(T).parent("."+R("Selector")).length||_||S(!1)}})}else y(document).removeEvent([u])},[g]),z(()=>{if(e.rootStates.SelectorMode!="original"||c.eventType=="init"||!g)return;let u=y('[data-input-origin="'+t.componentId+'"]');u&&u.focus()},[c.rawValue]),e.rootStates.SelectorMode!="original"?null:w(te,{children:[a(h,d(o({tabIndex:0},n),{"data-disabled":t.disabled,"data-show-validation":k.isShowValidation(c,!!W),"data-component-id":c.componentId,"data-input-origin":c.componentId,className:[O,R("Core")].join(" "),onFocus:u=>{if(n!=null&&n.onFocus&&(n==null||n.onFocus(u)),v(p=>d(o({},p),{eventID:C(12),isFocusing:!0})),!t.disabled){if(l)return i(!1);S(!0)}},onBlur:u=>{n!=null&&n.onBlur&&(n==null||n.onBlur(u)),v(p=>d(o({},p),{eventID:C(12),isFocusing:!1}))},onClick:u=>{n!=null&&n.onClick&&(n==null||n.onClick(u)),!t.disabled&&S(!0)},onKeyDown:u=>{let{key:p,metaKey:r,ctrlKey:T}=u,_=r||T;if(n!=null&&n.onKeyDown&&(n==null||n.onKeyDown(u)),L&&k.SubmitForm(u,F),!t.disabled){if(y.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(p))return;if(u.preventDefault(),!g)return S(!0);let I=p=="ArrowDown"?1:-1,m=b.FilterSelectableOptions(e),K=m.length-1,V=null;y.scope(()=>{var J,X,G,Q,Y;let D=m.findIndex(U=>(U==null?void 0:U.id)==s);if(I==1){if(V=(J=m[0])==null?void 0:J.id,_){V=m[K].id;return}if(D==-1||D==K)return;V=(X=m[D+1])==null?void 0:X.id}else{if(V=(G=m[K])==null?void 0:G.id,_){V=(Q=m[0])==null?void 0:Q.id;return}if(D==-1||D==0)return;V=(Y=m[D-1])==null?void 0:Y.id}}),f(V)}),p=="Escape")S(!1);else if(p=="Tab")S(!1);else if(p=="Backspace")v(I=>d(o({},I),{rawValue:null,eventType:"update",eventID:C(12),isInspected:!1}));else if(p==" ")u.preventDefault(),S(!0);else if(p=="Enter"){if(!g)return S(!0);u.preventDefault();let I=t.options.find(m=>(m==null?void 0:m.id)==s);if(!I)return;v(m=>d(o({},m),{rawValue:I==null?void 0:I.value,eventType:"update",eventID:C(12),isInspected:!1})),S(!1)}}},children:w(H.Left,{gap:0,children:[a(h,{freeCSS:{width:0},overflow:"hidden",opacity:"trans",children:"A"}),w(H.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[a(b.Placeholder,o({},e)),a(b.Selected,o({},e))]})]})})),g&&a(b.Selector,o({},e))]})},LegacySelector:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:l,set_preventOpenSelectorOnFocus:i,val_optionFocused:s,set_optionFocused:f,val_status:c,set_status:v,val_selectorOpen:g,set_selectorOpen:S}=e,p=t,{tone:B,required:x,form:F,className:O,label:le,isLabelActive:ae,placeholder:oe,enableFormSubmit:L,emptySelect:$,checkValidationAtFirst:W,onValidate:ne,onValidateDelay:re,onUpdateValue:se,onUpdateValidValue:ie,onUserAction:ue,onKeyDown:P,onChange:M,value:ce="",options:j,leftIndicator:de,rightIndicator:Se,leftIcon:pe,rightIcon:fe,componentId:me,status_id:ye,wrapStyles:ve,SelectedCellStyles:ge,SelectorCellStyles:be,SelectorMode:Ie,SelectorStyles:n,SelectorPosition:N}=p,u=q(p,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","onKeyDown","onChange","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorMode","SelectorStyles","SelectorPosition"]);return e.rootStates.SelectorMode!="legacy"?null:w(h,d(o({htmlTag:"select",tabIndex:0},u),{"data-disabled":t.disabled,"data-show-validation":k.isShowValidation(c,!!W),"data-component-id":c.componentId,"data-input-origin":c.componentId,className:[O,R("Core")].join(" "),onKeyDown:r=>{P&&P(r),L&&k.SubmitForm(r,F)},onChange:r=>{let{value:T}=r.target;v(_=>d(o({},_),{rawValue:T,eventType:"update",eventID:C(12),isInspected:!1,isValidated:!1,notice:[]})),M&&M(r)},children:[!!$&&a("option",{value:"null",children:"\u9078\u629E"}),j.map(r=>y.is.nullish(r==null?void 0:r.value)?null:a("option",{value:r==null?void 0:r.value,children:(r==null?void 0:r.label)||(r==null?void 0:r.value)},String(r==null?void 0:r.value)))]}))},Selector:e=>{var i;z(()=>{let s=y(`[data-selector-id="${e.val_status.componentId}"]`)[0];if(!s)return;let f=y(`[data-select-input-value="${e.val_optionFocused}"]`)[0];f&&(s.scrollTop=f.offsetTop-24)},[e.val_optionFocused]);let t=b.FilterSelectableOptions(e,!0),l={position:"absolute",minWidth:1,freeCSS:{zIndex:1e3}};switch(e.rootStates.SelectorPosition){case 1:l.bottom="100%",l.left=0,l.paddingBottom="1/3";break;case 2:l.bottom="100%",l.right=0,l.paddingBottom="1/3";break;case 3:l.top="100%",l.left=0,l.paddingTop="1/3";break;case 4:l.top="100%",l.right=0,l.paddingTop="1/3";break;default:break}return a(h,d(o({},l),{children:a(Oe.Body,d(o({className:R("Selector"),ssCardBox:!0,borderRadius:"2.tone.secondary",boxShadow:"1.normal",overflow:"auto","data-selector-id":e.val_status.componentId},e.rootStates.SelectorStyles),{freeCSS:o({minWidth:12*6,maxHeight:12*24},(i=e.rootStates.SelectorStyles)==null?void 0:i.freeCSS),children:w(Ce,{gap:"1/12",padding:[1,0],children:[t.map((s,f)=>{if(!s)return null;let{type:c,value:v}=s,g=e.val_optionFocused==s.id,S=e.val_status.rawValue===v;return c=="label"?a(h,{children:s.label||s.value},C()):a(we.Sub.S,d(o({"data-select-input-value":s.id,color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1],isActive:S||g,isActiveStyles:g?{backgroundColor:"cloud"}:{backgroundColor:"theme.opa.few",fontColor:"theme"}},e.rootStates.SelectorCellStyles),{onClick:B=>{e.set_status(x=>d(o({},x),{rawValue:v,eventType:"update",eventID:C(12),isInspected:!1})),e.set_selectorOpen(!1),e.set_preventOpenSelectorOnFocus(!0)},children:w(H.Left,{gap:"1/2",children:[S&&a(Z.Check,{fontColor:"theme"}),a(E.Supplement,{transition:"short",flexSizing:0,children:s.label||s.value})]})}),s.id)}),!t.length&&a(E.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]})}))}))},Selected:e=>{let t=e.rootStates.options.find(l=>y.is.equal(l==null?void 0:l.value,e.val_status.rawValue));return!t||e.val_status.rawValue===null&&(e.rootStates.label||e.rootStates.placeholder)?null:a(h,d(o({},e.rootStates.SelectedCellStyles),{children:(t==null?void 0:t.label)||(t==null?void 0:t.value)}),String(t==null?void 0:t.value))},Core:e=>{var x,F;let{value:t}=e,[l,i]=A(k.DefaultStatus(e.componentId,t)),[s,f]=A(!1),[c,v]=A(!1),[g,S]=A(((x=e.options.find(O=>(O==null?void 0:O.value)===e.value))==null?void 0:x.id)||((F=e.options[0])==null?void 0:F.id)||""),B={rootStates:e,val_preventOpenSelectorOnFocus:s,set_preventOpenSelectorOnFocus:f,val_optionFocused:g,set_optionFocused:S,val_selectorOpen:c,set_selectorOpen:v,val_status:l,set_status:i};return k.CommonEffects({type:"select",states:e,val_status:l,set_status:i,SystemValidation:De}),w(xe,{val_status:l,set_status:i,states:e,children:[a(Te,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:e.isLabelActive||l.rawValue!==null}),a(b.Shallow,o({},B)),a(b.Button,o({},B))]})}},ee=e=>{var l,i;let t=o({},e);return t=d(o({emptySelect:!0,SelectorMode:"original",SelectorPosition:3},t),{freeCSS:o({cursor:"pointer"},t.freeCSS)}),t.emptySelect&&(t.options=[{value:null,label:a(E.Supplement,{fontColor:"4.thin",children:"\u672A\u9078\u629E"})},...t.options]),t.value=(l=t.value)!=null?l:null,(i=t.options)==null||i.forEach((s,f)=>{if(!s)return;let{type:c,value:v}=s;t.options[f]=d(o({id:C(12)},s),{value:v,type:c||"selector"})}),y.is.nullish(t.rightIcon)&&(t.rightIcon=a(_e,{children:a(Z.AngleDown,{})})),a(Ve,{componentId:t.componentId,children:b.Core,states:Fe(t)})};export{ee as Select,ee as default};
|