11import api from '@/client/api' ;
2+ import { Entry , IEntryState , ISectionState , Section } from '@/client/apiGen' ;
23import { t } from '@/locales' ;
34import { globalCapture , modInfo , updateModInfo } from '@/store/refs' ;
45import { useAsyncState } from '@vueuse/core' ;
5- import { NFlex , NButton } from 'naive-ui' ;
6+ import { NFlex , NButton , NGrid , NGridItem , NFormItem , NSelect , NSwitch } from 'naive-ui' ;
67import { defineComponent , PropType , ref , computed , watch } from 'vue' ;
78
89export default defineComponent ( {
9- // props: {
10- // },
10+ props : {
11+ section : { type : Object as PropType < Section > , required : true } ,
12+ entryStates : { type : Object as PropType < Record < string , IEntryState > > , required : true } ,
13+ sectionState : { type : Object as PropType < ISectionState > , required : true } ,
14+ } ,
1115 setup ( props , { emit } ) {
1216 const install = useAsyncState ( async ( ) => {
1317 await api . InstallMmlLibs ( ) ;
@@ -19,14 +23,78 @@ export default defineComponent({
1923 } ,
2024 } )
2125
22- return ( ) => < div class = "" >
26+ const options = [
27+ { label : t ( 'mod.ioKeyMap.disabled' ) , value : 'None' } ,
28+ { label : t ( 'mod.ioKeyMap.select' ) , value : 'Select' } ,
29+ { label : t ( 'mod.ioKeyMap.select1P' ) , value : 'Select1P' } ,
30+ { label : t ( 'mod.ioKeyMap.select2P' ) , value : 'Select2P' } ,
31+ { label : t ( 'mod.ioKeyMap.service' ) , value : 'Service' } ,
32+ { label : t ( 'mod.ioKeyMap.test' ) , value : 'Test' } ,
33+ ] ;
34+
35+ const PREFIX = 'GameSystem.MaimollerIO.' ;
36+
37+ return ( ) => < NFlex vertical >
2338 { ! modInfo . value ?. isMmlLibInstalled ? < NFlex align = "center" class = "m-l-35" >
2439 < span class = "c-orange" > { t ( 'mod.mmlIo.notInstalled' ) } </ span >
2540 < NButton secondary onClick = { ( ) => install . execute ( ) } loading = { install . isLoading . value } > { t ( 'mod.mmlIo.oneClickInstall' ) } </ NButton >
2641 </ NFlex >
2742 : < NFlex align = "center" class = "m-l-35" >
2843 < span class = "c-green-6" > { t ( 'mod.mmlIo.installed' ) } </ span >
2944 </ NFlex > }
30- </ div > ;
45+ < div class = "m-l-35" >
46+ { t ( 'mod.mmlIo.tip' ) }
47+ </ div >
48+ < NGrid cols = "1 500:2" yGap = "12px" >
49+ < NGridItem >
50+ < NFlex vertical >
51+ { props . section . entries ?. filter ( it =>
52+ [ 'P1' , 'Touch1p' , 'Button1p' , 'Led1p' ] . map ( it => PREFIX + it ) . includes ( it . path ! ) )
53+ . map ( ( entry ) => {
54+ return < NFormItem label = { t ( `mod.mmlIo.${ entry . path ! . split ( '.' ) . pop ( ) } ` ) } labelPlacement = "left" labelWidth = "10em" showFeedback = { false } >
55+ < div class = "flex h-34px items-center" >
56+ < NSwitch v-model :value = { props . entryStates [ entry . path ! ] . value } />
57+ </ div >
58+ </ NFormItem >
59+ } )
60+ }
61+ < NFormItem label = { t ( 'mod.mmlIo.button1' ) } labelPlacement = "left" labelWidth = "10em" showFeedback = { false } >
62+ < NFlex vertical class = "w-full ws-pre-line" >
63+ < NSelect v-model :value = { props . entryStates [ PREFIX + 'Button1' ] . value } options = { options } />
64+ </ NFlex >
65+ </ NFormItem >
66+ < NFormItem label = { t ( 'mod.mmlIo.button2' ) } labelPlacement = "left" labelWidth = "10em" showFeedback = { false } >
67+ < NFlex vertical class = "w-full ws-pre-line" >
68+ < NSelect v-model :value = { props . entryStates [ PREFIX + 'Button2' ] . value } options = { options } />
69+ </ NFlex >
70+ </ NFormItem >
71+ </ NFlex >
72+ </ NGridItem >
73+ < NGridItem >
74+ < NFlex vertical >
75+ { props . section . entries ?. filter ( it =>
76+ [ 'P2' , 'Touch2p' , 'Button2p' , 'Led2p' ] . map ( it => PREFIX + it ) . includes ( it . path ! ) )
77+ . map ( ( entry ) => {
78+ return < NFormItem label = { t ( `mod.mmlIo.${ entry . path ! . split ( '.' ) . pop ( ) } ` ) } labelPlacement = "left" labelWidth = "10em" showFeedback = { false } >
79+ < div class = "flex h-34px items-center" >
80+ < NSwitch v-model :value = { props . entryStates [ entry . path ! ] . value } />
81+ </ div >
82+ </ NFormItem >
83+ } )
84+ }
85+ < NFormItem label = { t ( 'mod.mmlIo.button3' ) } labelPlacement = "left" labelWidth = "10em" showFeedback = { false } >
86+ < NFlex vertical class = "w-full ws-pre-line" >
87+ < NSelect v-model :value = { props . entryStates [ PREFIX + 'Button3' ] . value } options = { options } />
88+ </ NFlex >
89+ </ NFormItem >
90+ < NFormItem label = { t ( 'mod.mmlIo.button4' ) } labelPlacement = "left" labelWidth = "10em" showFeedback = { false } >
91+ < NFlex vertical class = "w-full ws-pre-line" >
92+ < NSelect v-model :value = { props . entryStates [ PREFIX + 'Button4' ] . value } options = { options } />
93+ </ NFlex >
94+ </ NFormItem >
95+ </ NFlex >
96+ </ NGridItem >
97+ </ NGrid >
98+ </ NFlex > ;
3199 } ,
32100} ) ;
0 commit comments