Skip to content

Commit 0ecf114

Browse files
eagleoflqjeagleoflqj
committed
initial ExternalOption
1 parent f4efdda commit 0ecf114

File tree

10 files changed

+168
-66
lines changed

10 files changed

+168
-66
lines changed

‎src/BasicConfig.vue

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<script setup lang="ts">
22
import { computed } from 'vue'
3-
import { NAlert, NForm, NFormItem } from 'naive-ui'
3+
import { NAlert, NDialogProvider, NForm, NFormItem } from 'naive-ui'
44
import type { Config } from 'fcitx5-js'
55
import TooltipButton from './TooltipButton.vue'
66
import IntegerOption from './option/IntegerOption.vue'
77
import BooleanOption from './option/BooleanOption.vue'
88
import EnumOption from './option/EnumOption.vue'
99
import KeyOption from './option/KeyOption.vue'
1010
import StringOption from './option/StringOption.vue'
11+
import ExternalOption from './option/ExternalOption.vue'
1112
import ListOption from './option/ListOption.vue'
1213
import GroupOption from './option/GroupOption.vue'
1314
import UnknownOption from './option/UnknownOption.vue'
@@ -34,6 +35,8 @@ function toComponent(child: { Type: string, Children: any[] | null }) {
3435
return KeyOption
3536
case 'String':
3637
return StringOption
38+
case 'External':
39+
return ExternalOption
3740
default: {
3841
if (child.Type.startsWith('List|')) {
3942
return ListOption
@@ -67,12 +70,14 @@ function toComponent(child: { Type: string, Children: any[] | null }) {
6770
:text="child.Tooltip"
6871
/>
6972
</template>
70-
<component
71-
:is="toComponent(child)"
72-
:config="child"
73-
:value="value[child.Option]"
74-
@update="v => onUpdate({ ...value, [child.Option]: v })"
75-
/>
73+
<NDialogProvider>
74+
<component
75+
:is="toComponent(child)"
76+
:config="child"
77+
:value="value[child.Option]"
78+
@update="v => onUpdate({ ...value, [child.Option]: v })"
79+
/>
80+
</NDialogProvider>
7681
</NFormItem>
7782
</NForm>
7883
</template>

‎src/FooterButtons.vue

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script setup lang="ts">
2+
import { NButton, NFlex } from 'naive-ui'
3+
4+
defineProps<{
5+
reset: () => void
6+
close: () => void
7+
apply: () => void
8+
}>()
9+
</script>
10+
11+
<template>
12+
<NFlex
13+
style="padding: 8px; justify-content: space-between"
14+
>
15+
<NFlex>
16+
<NButton
17+
secondary
18+
@click="reset"
19+
>
20+
Reset to default
21+
</NButton>
22+
<NButton
23+
secondary
24+
@click="close"
25+
>
26+
Cancel
27+
</NButton>
28+
</NFlex>
29+
<NFlex>
30+
<NButton
31+
secondary
32+
@click="apply"
33+
>
34+
Apply
35+
</NButton>
36+
<NButton
37+
secondary
38+
type="info"
39+
@click="apply(); close()"
40+
>
41+
OK
42+
</NButton>
43+
</NFlex>
44+
</NFlex>
45+
</template>

‎src/GearButton.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts">
2+
import { NButton, NIcon } from 'naive-ui'
3+
import GearIcon from './GearIcon.vue'
4+
</script>
5+
6+
<template>
7+
<NButton secondary>
8+
<template #icon>
9+
<NIcon>
10+
<GearIcon />
11+
</NIcon>
12+
</template>
13+
</NButton>
14+
</template>

‎src/GearIcon.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script lang="ts">
2+
export default {
3+
name: 'MdiCog',
4+
}
5+
</script>
6+
7+
<template>
8+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1s.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64z" /></svg>
9+
</template>

‎src/InputMethodConfig.vue

Lines changed: 7 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<script lang="ts">
22
import { computed, h, ref, watchEffect } from 'vue'
33
import type { MenuOption } from 'naive-ui'
4-
import type { Config } from 'fcitx5-js'
54
import { NButton, NCheckbox, NCheckboxGroup, NFlex, NLayout, NLayoutFooter, NLayoutSider, NMenu } from 'naive-ui'
65
import MinusButton from './MinusButton.vue'
76
import PlusButton from './PlusButton.vue'
87
import BasicConfig from './BasicConfig.vue'
8+
import FooterButtons from './FooterButtons.vue'
9+
import { extractValue } from './util'
910
1011
const languageName = new Intl.DisplayNames(navigator.language, { type: 'language' })
1112
</script>
@@ -137,20 +138,6 @@ const filteredLanguageOptions = computed(() => {
137138
138139
const form = ref({})
139140
140-
function extractValue(config: Config, reset: boolean) {
141-
const value: { [key: string]: any } = {}
142-
if ('Children' in config) {
143-
for (const child of config.Children) {
144-
value[child.Option] = reset
145-
? (
146-
'DefaultValue' in child ? child.DefaultValue : extractValue(child, true)
147-
)
148-
: child.Value
149-
}
150-
}
151-
return value
152-
}
153-
154141
watchEffect(() => {
155142
form.value = extractValue(config.value, false)
156143
})
@@ -162,11 +149,6 @@ function reset() {
162149
function apply() {
163150
window.fcitx.setConfig(uri.value, form.value)
164151
}
165-
166-
function confirm() {
167-
apply()
168-
props.onClose()
169-
}
170152
</script>
171153

172154
<template>
@@ -265,39 +247,11 @@ function confirm() {
265247
/>
266248
</NLayout>
267249
<NLayoutFooter position="absolute">
268-
<NFlex
269-
style="padding: 8px; justify-content: space-between"
270-
>
271-
<NFlex>
272-
<NButton
273-
secondary
274-
@click="reset()"
275-
>
276-
Reset to default
277-
</NButton>
278-
<NButton
279-
secondary
280-
@click="onClose()"
281-
>
282-
Cancel
283-
</NButton>
284-
</NFlex>
285-
<NFlex>
286-
<NButton
287-
secondary
288-
@click="apply()"
289-
>
290-
Apply
291-
</NButton>
292-
<NButton
293-
secondary
294-
type="info"
295-
@click="confirm()"
296-
>
297-
OK
298-
</NButton>
299-
</NFlex>
300-
</NFlex>
250+
<FooterButtons
251+
:reset="reset"
252+
:apply="apply"
253+
:close="onClose"
254+
/>
301255
</NLayoutFooter>
302256
</template>
303257
</NLayout>

‎src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export { default as InputMethodConfig } from './InputMethodConfig.vue'
2+
export { default as GearButton } from './GearButton.vue'

‎src/option/EnumOption.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import { NSelect } from 'naive-ui'
55
const props = defineProps<{
66
config: {
77
Enum: { [key: string]: string }
8-
EnumI18n: { [key: string]: string }
8+
EnumI18n?: { [key: string]: string }
99
}
1010
value: string
1111
onUpdate: (value: string) => void
1212
}>()
1313
1414
const options = computed(() => Object.entries(props.config.Enum).map(([key, value]) => ({
15-
label: props.config.EnumI18n[key],
15+
label: (props.config.EnumI18n || props.config.Enum)[key],
1616
value,
1717
})))
1818
</script>

‎src/option/ExternalOption.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<script setup lang="ts">
2+
import { h, ref } from 'vue'
3+
import { useDialog } from 'naive-ui'
4+
import GearButton from '../GearButton.vue'
5+
import BasicConfig from '../BasicConfig.vue'
6+
import FooterButtons from '../FooterButtons.vue'
7+
import { extractValue } from '../util'
8+
9+
const props = defineProps<{
10+
config: {
11+
Description: string
12+
External: string
13+
Option: string
14+
LaunchSubConfig?: string
15+
}
16+
}>()
17+
18+
const dialog = useDialog()
19+
const form = ref({})
20+
21+
function click() {
22+
switch (props.config.Option) {
23+
default:
24+
if (props.config.LaunchSubConfig === 'True') {
25+
const config = window.fcitx.getConfig(props.config.External)
26+
form.value = extractValue(config, false)
27+
const instance = dialog.info({
28+
title: props.config.Description,
29+
content: () => h(BasicConfig, {
30+
path: props.config.Option,
31+
config,
32+
value: form.value,
33+
onUpdate(v) {
34+
form.value = v
35+
},
36+
}),
37+
action: () => h(FooterButtons, {
38+
reset() {
39+
form.value = extractValue(config, true)
40+
},
41+
close() {
42+
instance.destroy()
43+
},
44+
apply() {
45+
window.fcitx.setConfig(props.config.External, form.value)
46+
},
47+
}),
48+
})
49+
}
50+
else {
51+
dialog.error({
52+
title: 'Error',
53+
content: `Unknown External Option: ${props.config.Option}`,
54+
positiveText: 'OK',
55+
})
56+
}
57+
}
58+
}
59+
</script>
60+
61+
<template>
62+
<GearButton @click="click" />
63+
</template>

‎src/option/GroupOption.vue

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script setup lang="ts">
2-
import { ref } from 'vue'
32
import { NCard } from 'naive-ui'
43
import BasicConfig from '../BasicConfig.vue'
54
@@ -10,14 +9,11 @@ defineProps<{
109
value: any
1110
onUpdate: (value: any) => void
1211
}>()
13-
14-
const basicConfig = ref()
1512
</script>
1613

1714
<template>
1815
<NCard>
1916
<BasicConfig
20-
ref="basicConfig"
2117
path=""
2218
:config="config"
2319
:value="value"

‎src/util.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
11
import { computed } from 'vue'
22
import { useBreakpoint } from 'vooks'
3+
import type { Config } from 'fcitx5-js'
34

45
const breakpoint = useBreakpoint()
56
export const isMobile = computed(() => breakpoint.value === 'xs' || breakpoint.value === 's')
7+
8+
export function extractValue(config: Config, reset: boolean) {
9+
const value: { [key: string]: any } = {}
10+
if ('Children' in config) {
11+
for (const child of config.Children) {
12+
value[child.Option] = reset
13+
? (
14+
'DefaultValue' in child ? child.DefaultValue : extractValue(child, true)
15+
)
16+
: child.Value
17+
}
18+
}
19+
return value
20+
}

0 commit comments

Comments
 (0)